<template>
  <div class="addgoods">
    <a-card title="发布新品" style="width: 100%;">
      <!-- <a slot="extra" href="#">more</a> -->
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form_box">
        <a-form-model-item label="">
          <div class="form_title">商品详情信息</div>
        </a-form-model-item>
        <a-form-model-item label="商品链接" ref="goods_url" prop="goods_url">
          <div class="display">
            <a-input
              v-model="form.goods_url"
              placeholder="请输入商品链接"
              :disabled="goodsurldis"
              @blur="
                () => {
                  $refs.goods_url.onFieldBlur();
                }
              " />
            <a-button class="getinfo" type="primary" :loading="btnloading" size="large" @click="doDetectionGoods">
              读取数据
            </a-button>
          </div>
        </a-form-model-item>
        <div v-if="ischack">
          <a-form-model-item label="">
            <div class="display">
              <div class="display">
                <div style="width:157px;text-align: right;margin-right:10px">商品类型: </div>
                <a-select v-model="form.goods_type" placeholder="请选择商品类型" size="large" style="width:200px">
                  <a-select-option value="1">
                    京东自营
                  </a-select-option>
                  <a-select-option value="2">
                    京东拼购
                  </a-select-option>
                  <a-select-option value="3">
                    POP
                  </a-select-option>
                </a-select>
              </div>
              <div class="display">
                <div style="width:105px;text-align: right;margin-right:10px">商品分类: </div>
                <a-select
                  v-model="form.goods_class_id"
                  placeholder="请选择商品分类"
                  size="large"
                  style="width:200px"
                  @change="classchange">
                  <a-select-option :value="item.id" v-for="(item,index) in classList" :key="index">
                    {{ item.class_name }}
                  </a-select-option>
                </a-select>
              </div>
              <div class="display">
                <div style="width:106px;text-align: right;margin-right:10px">商品品牌: </div>
                <a-select
                  v-model="form.brand_id"
                  placeholder="请选择商品品牌"
                  size="large"
                  style="width:200px"
                  show-search
                  :filter-option="filterOption">
                  <div slot="dropdownRender" slot-scope="menu">
                    <v-nodes :vnodes="menu" />
                    <a-divider style="margin: 4px 0;" />
                    <div
                      style="padding: 4px 8px; cursor: pointer;text-align: center;"
                      @mousedown="e => e.preventDefault()">
                      <a-pagination
                        size="small"
                        v-model="current"
                        :pageSize="pagesize"
                        :total="salecount"
                        @change="pageChange" />
                    </div>
                  </div>
                  <a-select-option :value="item.id" v-for="(item,index) in saleList" :key="index">
                    {{ item.brand_name }}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="商品主图" prop="goods_img">
            <a-card title="商品展示主图" style="width: 834px">
              <div class="showimg_mian">
                <div class="showimg">
                  <a-upload
                    v-if="form.goods_img==''"
                    name="file"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    list-type="picture-card"
                    :multiple="false"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="handleChange3">
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon type="fund" />
                        <p>
                          请上传商品主图
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <div v-else class="img_box">
                    <img :src="form.goods_img" alt="" srcset="">
                    <a-icon type="close-circle" @click="closeimg2(1)" />
                  </div>
                </div>
                <div class="upload_box">
                  <a-upload
                    v-if="videourl===''"
                    name="file"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    @change="handleChange">
                    <!-- :before-upload="beforeUpload" -->
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon :type="loading ? 'loading' : 'play-circle'" />
                        <p>
                          上传视频
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <video v-else class="upvideo" :src="videourl" controls="controls">
                    <!-- <source type="video/mp4">
                  您的浏览器不支持播放! -->
                  </video>
                </div>
              </div>
            </a-card>
            <a-card title="营销长图" style="width: 834px;position: relative;">
              <div class="showimg_mian">
                <div class="showimg">
                  <a-upload
                    v-if="form.marketing_img==''"
                    name="file"
                    action="https://jfk-api.letuilm.com/api/upload_img"
                    list-type="picture-card"
                    :multiple="false"
                    :show-upload-list="false"
                    :before-upload="beforeUpload"
                    @change="handleChange4">
                    <div class="nogoodsimg">
                      <div class="no_main">
                        <a-icon type="fund" />
                        <p>
                          请上传营销长图
                        </p>
                      </div>
                    </div>
                  </a-upload>
                  <div v-else class="img_box">
                    <img :src="form.marketing_img" alt="" srcset="">
                    <a-icon type="close-circle" @click="closeimg2(2)" />
                  </div>
                </div>
              </div>
              <div class="show_w" @click="show2=!show2"><div v-show="show2">收<br/>起<br/>小<br/>工<br/>具</div><div v-show="!show2">展<br/>开<br/>小<br/>工<br/>具</div></div>
            </a-card>
            <a-card title="商品细节图" style="width: 834px">
              <a-button slot="extra" @click="showeva">
                获取评价图
              </a-button>
              <div class="showgoodsinfo">
                <a-upload
                  name="file"
                  action="https://jfk-api.letuilm.com/api/upload_img"
                  list-type="picture-card"
                  :file-list="fileList"
                  :multiple="true"
                  :before-upload="beforeUpload"
                  @preview="handlePreview"
                  @change="handleChange2">
                  <div v-if="fileList.length < 5">
                    <a-icon type="plus" />
                    <div class="ant-upload-text">
                      上传细节图
                    </div>
                  </div>
                </a-upload>
                <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                  <img alt="example" style="width: 100%" :src="previewImage" />
                </a-modal>
              </div>
              <div>
                <p>*商品主图请控制在2M以内，尺寸为800*800,细节图最多上传5张</p>
                <p>*小程序主尺寸为800*640</p>
                <p>*视频请控制在5MB以内，请使用MP4格式</p>
              </div>
              <a-modal title="商品评价图(最多选择5张)" :visible="evaimgs" :width="750" @ok="handleOka" @cancel="handleCancel">
                <div class="evaimgs_box" ref="evabox" @scroll="Scroll">
                  <div class="choose_box">
                    <div v-if="chooseimged.length===0" style="margin:0 auto;">
                      请选择下方评价图!
                    </div>
                    <div style="display: flex;justify-content:space-around" v-else>
                      <div v-for="(item,index) in chooseimged" :key="index" class="chooseimg">
                        <img :src="item">
                        <a-icon type="close-circle" @click="closechoose(item)" />
                      </div>
                    </div>
                  </div>
                  <a-checkbox-group v-model="chooseimged" :disabled="chooseimged.length>4">
                    <a-row>
                      <a-col :span="8" v-for="(item,index) in imgsList" :key="index">
                        <a-checkbox :value="item">
                          <img :src="item" alt="" srcset="">
                        </a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                  <a-button type="dashed" :loading="loadingbtn" block @click="Scroll">
                    加载更多...
                  </a-button>
                </div>
              </a-modal>
            </a-card>

          </a-form-model-item>
          <a-form-model-item label="京东名称">
            <a-input v-model="form.goods_name" disabled />
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="display">
              <div class="display">
                <div style="width:270px;text-align: right;margin-right:10px">商品原价: </div>
                <a-input v-model="form.goods_price" />
              </div>
              <div class="display">
                <div style="width:200px;text-align: right;margin-right:10px">佣金比例: </div>
                <a-input v-model="form.commission_bl" />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="商品短标题" prop="goods_short_name">
            <a-input v-model="form.goods_short_name" placeholder="限制在25个汉字之内，优质精简标题，概括精华！" />
          </a-form-model-item>
          <a-form-model-item label="商品文案" prop="goods_copywriting">
            <a-textarea
              v-model="form.goods_copywriting"
              :auto-size="{ minRows: 3, maxRows: 6 }"
              placeholder="20-50字精简文案！突出产品亮点、需求痛点、为什么值得购买！"
              allow-clear />
          </a-form-model-item>
          <a-form-model-item label="转载文案">
            <a-textarea
              v-model="form.turn_copywriting"
              :auto-size="{ minRows:6, maxRows: 10 }"
              placeholder="请按右侧规范填写"
              allow-clear />
            <div class="tips">
              例：<br />
              [商品标题]<br />
              京东价：[商品原价]元<br />
              抢购价：[优惠价]元<br />
              优惠：[券面额]元<br />
              京东链接：[商品原始链接]<br />
              优惠券链接：[优惠券链接]<br />
              抢购：[商品推广链接]<br />
              拍2件：231元 4瓶<br />
              拍2件券:http://coupon.m.jd.com/..<br />
              拍5件券:http://coupon.m.jd.com/..<br />
              [推荐文案]<br />
              特别注意>>请认真填写转链文案，不填请留空,<br />
              禁止填写店铺/个人小尾巴!!<br />
            </div>
          </a-form-model-item>
          <a-form-model-item label="朋友圈文案" >
            <div class="emoji_box">
              <a-textarea
                id="emojiInput"
                ref="texttemplate"
                v-model="form.friend_copywriting"
                :auto-size="{ minRows:6, maxRows: 15 }"
                placeholder="请填写朋友圈文案"
                allow-clear />
              <div id="exampleInputEmoji">
                <a-button style="font-size:20px" @click="openemoji" >😃</a-button>
                <vue-emoji
                  class="vue_emoji"
                  v-show="showDialog"
                  @select="selectEmoji2"
                >
                </vue-emoji>
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="商品开始时间" prop="goods_start_time">
            <div>
              <a-radio-group name="radioGroup" v-model="startshow" :default-value="1">
                <a-radio :value="1">
                  此刻
                </a-radio>
                <a-radio :value="2">
                  选择时间
                </a-radio>
              </a-radio-group>
            </div>
            <div v-if="startshow==2">
              <a-date-picker
                v-model="form.goods_start_time"
                :disabled-date="disabledEndDate"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="预告时间"
                :open="endOpen"
                @openChange="handleEndOpenChange" />
              <!-- <a-input v-model="couponform.goods_start_time" placeholder="填写开始时间" /> -->
            </div>
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="form_title">优惠劵信息</div>
          </a-form-model-item>
          <a-form-model-item label="优惠券链接" prop="coupon_url">
            <div class="display">
              <a-input v-model="form.coupon_url" @blur="doDetectionCoupon" placeholder="请输入优惠劵链接" />
              <!-- <a-button class="getinfo" type="primary" size="large" @click="">
                读取数据
              </a-button> -->
            </div>
            <div class="coupon_box">
              <div class="coupon_info" style="margin-top:10px">
                <span>优惠券面额</span>
                <a-input v-model="form.coupon_discount" disabled />
                <span>商品优惠价</span>
                <a-input v-model="form.goods_after_price" disabled />
              </div>
              <div class="coupon_info">
                <span>优惠券总数</span>
                <a-input v-model="form.coupon_all_num" disabled />
                <span>开始时间</span>
                <a-input v-model="coupon_start_time" disabled />
              </div>
              <div class="coupon_info">
                <span>优惠券剩余</span>
                <a-input v-model="form.coupon_surplus_num" disabled />
                <span>到期时间</span>
                <a-input v-model="coupon_end_time" disabled />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="">
            <div class="form_title">附加信息</div>
          </a-form-model-item>
          <!-- <a-form-model-item label="推荐理由">
            <a-input v-model="form.reason" placeholder="展示给推广者，告知他们一个心动的理由来推广你提供的商品" />
          </a-form-model-item> -->
          <a-form-model-item label="搜索标签">
            <!-- <a-input v-model="form.search_label" placeholder="请输入优化搜索关键词逗号隔开" /> -->
            <div>
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 5" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                    {{ `${tag.slice(0, 5)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                  {{ tag }}
                </a-tag>
              </template>
              <a-input
                v-if="inputVisible"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm" />
              <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                <a-icon type="plus" /> 新增标签
              </a-tag>
            </div>
          </a-form-model-item>
          <a-form-model-item>
            <a-button @click="onSubmit" type="primary" size="large" class="subbtn">
              提 交
            </a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-card>
    <transition name="el-fade-in">
      <div v-show="show2" class="transition-box">
        <div class="position_w">
          <a-card title="小工具" style="width: 1000px">
            <div class="widgepic">
              <div class="widgepic_main">
                <!-- <el-card :body-style="{ padding: '0px' }"> -->
                <el-row
                  :gutter="24"
                  justify="flex-start"
                  style="margin-left: 0px;margin-right: 0px;width:100%;height:100%"
                >
                  <el-col
                    :span="10"
                    style="padding-left:0px;padding-right:0px;height:100%"
                  >
                    <!-- 左侧上传/展示 -->

                    <div class="main_box" :style="{ height: cardheight + 'px' }">
                      <!-- 营销推广图 -->
                      <div v-show="leftshow !== '5'">
                        <!-- 渲染dom -->
                        <div class="canvas_box">
                          <div id="mycanvas" class="mycanvas" ref="mycanvas">
                            <div v-if="uploadradio === 1" class="uploadradio1">
                              <div class="uploadone">
                                <div v-if="imgone === ''" style="width:100%;height:100%">
                                  <el-upload
                                    style="width:370px;height:370px; "
                                    class="avatar-uploader"
                                    :action="uploadaction"
                                    :on-success="uploadSuccess1"
                                    :on-error="uploadError"
                                    :limit="1"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                  >
                                    <div
                                      style="width:100%;height:100%;line-height:370px;background-color:#adf;"
                                    >
                                      <div style="font-size:18px;color:black;">
                                        点击上传图片
                                      </div>
                                    </div>
                                  </el-upload>
                                </div>
                                <div v-else class="img_box">
                                  <el-image
                                    style="width: 100%; height: 100%"
                                    :src="imgone"
                                    fit="fill"
                                    crossOrigin="Anonymous"
                                  ></el-image>
                                  <i class="el-icon-close" @click="closeimg(1)"></i>
                                </div>
                              </div>
                            </div>
                            <div v-if="uploadradio === 2" class="uploadradio1">
                              <div class="uploadone">
                                <div v-if="imgone === ''" style="width:100%;height:100%">
                                  <el-upload
                                    style="width:370px;height:370px; "
                                    class="avatar-uploader"
                                    :action="uploadaction"
                                    :on-success="uploadSuccess1"
                                    :on-error="uploadError"
                                    :limit="1"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                  >
                                    <div
                                      style="width:100%;height:100%;line-height:370px;background-color:#adf;"
                                    >
                                      <div style="font-size:18px;color:black;">
                                        点击上传图片
                                      </div>
                                    </div>
                                  </el-upload>
                                </div>
                                <div v-else class="img_box">
                                  <el-image
                                    style="width: 100%; height: 100%"
                                    :src="imgone"
                                    fit="fill"
                                    crossOrigin="Anonymous"
                                  ></el-image>
                                  <i class="el-icon-close" @click="closeimg(1)"></i>
                                </div>
                              </div>
                              <div class="display">
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgtwo === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess2"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgtwo"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(2)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgthree === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess3"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#fcc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgthree"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(3)"></i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="uploadradio === 3" class="uploadradio1 up3">
                              <div class="uploadone">
                                <div v-if="imgone === ''" style="width:100%;height:100%">
                                  <el-upload
                                    style="width:246px;height:246px; "
                                    class="avatar-uploader"
                                    :action="uploadaction"
                                    :on-success="uploadSuccess1"
                                    :on-error="uploadError"
                                    :limit="1"
                                    :multiple="false"
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                  >
                                    <div
                                      style="width:100%;height:100%;line-height:246px;background-color:#adf;"
                                    >
                                      <div style="font-size:18px;color:black;">
                                        点击上传图片
                                      </div>
                                    </div>
                                  </el-upload>
                                </div>
                                <div v-else class="img_box">
                                  <el-image
                                    style="width: 100%; height: 100%"
                                    :src="imgone"
                                    fit="fill"
                                    crossOrigin="Anonymous"
                                  ></el-image>
                                  <i class="el-icon-close" @click="closeimg(1)"></i>
                                </div>
                              </div>
                              <div style="display:inline-block">
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgtwo === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:123px;height:123px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess2"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:123px;background-color:#cfc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgtwo"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(2)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgthree === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:123px;height:123px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess3"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:123px;background-color:#fcc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgthree"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(3)"></i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="uploadradio === 4" class="uploadradio1">
                              <div class="display">
                                <div class="uploadthree">
                                  <div
                                    v-if="imgone === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess1"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#adf;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgone"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(1)"></i>
                                  </div>
                                </div>
                                <div class="uploadthree">
                                  <div
                                    v-if="imgtwo === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess2"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgtwo"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(2)"></i>
                                  </div>
                                </div>
                              </div>
                              <div class="display">
                                <div class="uploadthree">
                                  <div
                                    v-if="imgthree === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess3"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#fcc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgthree"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(3)"></i>
                                  </div>
                                </div>
                                <div class="uploadfour">
                                  <div
                                    v-if="imgfour === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess4"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#cff;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgfour"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(4)"></i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="uploadradio === 5" class="uploadradio1 up5">
                              <div class="up5_left">
                                <div class="uploadone">
                                  <div
                                    v-if="imgone === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:222px;height:222px;"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess1"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:222px;background-color:#adf;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgone"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(1)"></i>
                                  </div>
                                </div>
                                <div class="uploadone">
                                  <div
                                    v-if="imgfour === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:222px;height:222px;"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess4"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:222px;background-color:#cff;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgfour"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(4)"></i>
                                  </div>
                                </div>
                              </div>
                              <div class="up5_right">
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgtwo === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:148px;height:148px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess2"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:148px;background-color:#cfc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgtwo"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(2)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgthree === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:148px;height:148px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess3"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:148px;background-color:#fcc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgthree"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(3)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgfive === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:148px;height:148px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess5"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:148px;background-color:#ccf;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgfive"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(5)"></i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div v-if="uploadradio === 6" class="uploadradio1 up6">
                              <div class="up6_top">
                                <div class="uploadthree">
                                  <div
                                    v-if="imgone === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess1"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#adf;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgone"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(1)"></i>
                                  </div>
                                </div>
                                <div class="uploadthree">
                                  <div
                                    v-if="imgtwo === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:185px;height:185px;"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess2"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:185px;background-color:#cfc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgtwo"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(2)"></i>
                                  </div>
                                </div>
                              </div>
                              <div class="up6_bot">
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgthree === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:123px;height:123px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess3"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:123px;background-color:#fcc;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgthree"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(3)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgfour === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:123px;height:123px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess4"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:123px;background-color:#cff;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgfour"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(4)"></i>
                                  </div>
                                </div>
                                <div class="uploadtwo">
                                  <div
                                    v-if="imgfive === ''"
                                    style="width:100%;height:100%"
                                  >
                                    <el-upload
                                      style="width:123px;height:123px;margin:0 auto"
                                      class="avatar-uploader"
                                      :action="uploadaction"
                                      :on-success="uploadSuccess5"
                                      :on-error="uploadError"
                                      :limit="1"
                                      :multiple="false"
                                      :show-file-list="false"
                                      :before-upload="beforeAvatarUpload"
                                    >
                                      <div
                                        style="width:100%;height:100%;line-height:123px;background-color:#ccf;"
                                      >
                                        <div style="font-size:18px;color:black;">
                                          点击上传图片
                                        </div>
                                      </div>
                                    </el-upload>
                                  </div>
                                  <div v-else class="img_box">
                                    <el-image
                                      style="width: 100%; height: 100%"
                                      :src="imgfive"
                                      fit="fill"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <i class="el-icon-close" @click="closeimg(5)"></i>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- 定位圆标签 -->
                            <div
                              ref="showtabs"
                              id="showtabs"
                              class="show_tabs"
                              :style="{
                                top: potop,
                                left: poleft
                              }"
                              @mousedown="movedown($event, 'showtabs')"
                            >
                              <!-- 圆标签 -->
                              <div v-if="roundshow">
                                <div
                                  :style="{
                                    position: 'relative',
                                    textAlign: 'center',
                                    width:
                                      sizeradio === '1'
                                        ? '120px'
                                        : sizeradio === '2'
                                          ? '150px'
                                          : '160px',
                                    height:
                                      sizeradio === '1'
                                        ? '120px'
                                        : sizeradio === '2'
                                          ? '150px'
                                          : '160px',
                                    overflow: 'hidden'
                                  }"
                                >
                                  <img
                                    :src="roundbgList[smallLabel]"
                                    alt=""
                                    :style="{
                                      width:
                                        sizeradio === '1'
                                          ? '120px'
                                          : sizeradio === '2'
                                            ? '150px'
                                            : '160px'
                                    }"
                                    srcset=""
                                  />
                                  <div
                                    :style="{
                                      position: 'absolute',
                                      width:
                                        sizeradio === '1'
                                          ? '120px'
                                          : sizeradio === '2'
                                            ? '150px'
                                            : '160px',
                                      height:
                                        sizeradio === '1'
                                          ? '120px'
                                          : sizeradio === '2'
                                            ? '150px'
                                            : '160px',
                                      top: 0,
                                      left: '0'
                                    }"
                                  >
                                    <!-- 文字一 -->
                                    <p
                                      class="sh1"
                                      :style="{
                                        marginTop:
                                          sizeradio === '1'
                                            ? '27px'
                                            : sizeradio === '2'
                                              ? '35px'
                                              : '40px',
                                        height: '14px',
                                        fontWeight: 'bold',
                                        color: title_color1,
                                        fontSize: title_size1 + 'px',
                                        fontFamily: title_famiy1
                                      }"
                                    >
                                      {{ title1 }}
                                    </p>
                                    <!-- 文字二 -->
                                    <p
                                      class="sh2"
                                      :style="{
                                        height: '13px',
                                        marginTop:
                                          sizeradio === '1'
                                            ? '5px'
                                            : sizeradio === '2'
                                              ? '10px'
                                              : '10px',
                                        color: title_color2,
                                        fontSize: title_size2 + 'px',
                                        fontFamily: title_famiy2
                                      }"
                                    >
                                      {{ title2 }}
                                    </p>
                                    <!-- 文字三 -->
                                    <p
                                      class="sh3"
                                      :style="{
                                        height: '13px',
                                        marginTop:
                                          sizeradio === '1'
                                            ? '0px'
                                            : sizeradio === '2'
                                              ? '5px'
                                              : '6px',
                                        color: title_color3,
                                        fontSize: title_size3 + 'px',
                                        fontFamily: title_famiy3
                                      }"
                                    >
                                      {{ title3 }}
                                    </p>
                                    <!-- 文字四 -->
                                    <p
                                      class="sh4"
                                      :style="{
                                        height: '13px',
                                        marginTop:
                                          sizeradio === '1'
                                            ? '0px'
                                            : sizeradio === '2'
                                              ? '6px'
                                              : '7px',
                                        color: title_color4,
                                        fontSize: title_size4 + 'px',
                                        fontFamily: title_famiy4
                                      }"
                                    >
                                      {{ title4 }}
                                    </p>
                                  </div>
                                </div>
                                <i
                                  class="el-icon-close"
                                  @click="closediv('showtabs')"
                                ></i>
                              </div>
                            </div>
                            <!-- 定位长标签 -->
                            <div
                              ref="showlong"
                              id="showlong"
                              class="show_tabs"
                              :style="{
                                top: potop,
                                left: poleft
                              }"
                              @mousedown="movedown($event, 'showlong')"
                            >
                              <!-- 长标签 -->
                              <div v-if="longshow">
                                <div
                                  :style="{
                                    position: 'relative',
                                    textAlign: 'center',
                                    width: '370px',
                                    height: '41px',
                                    overflow: 'hidden'
                                  }"
                                >
                                  <img
                                    :src="stripbgList[stripradio]"
                                    alt=""
                                    :style="{
                                      width: '370px',
                                      height: '41px'
                                    }"
                                    srcset=""
                                  />
                                  <div
                                    :style="{
                                      position: 'absolute',
                                      display: 'flex',
                                      justifyContent: 'space-around',
                                      width: '370px',
                                      height: '41px',
                                      top: '0px',
                                      left: '0px'
                                    }"
                                  >
                                    <!-- 文字一 -->
                                    <p
                                      class="sh1"
                                      :style="{
                                        width: '120px',
                                        height: '41px',
                                        lineHeight: '41px',
                                        color: title_color5,
                                        fontSize: title_size5 + 'px',
                                        fontFamily: title_famiy5
                                      }"
                                    >
                                      {{ title5 }}
                                    </p>
                                    <!-- 文字二 -->
                                    <p
                                      class="sh2"
                                      :style="{
                                        width: '120px',
                                        height: '41px',
                                        lineHeight: '41px',
                                        color: title_color6,
                                        fontSize: title_size6 + 'px',
                                        fontFamily: title_famiy6
                                      }"
                                    >
                                      {{ title6 }}
                                    </p>
                                    <!-- 文字三 -->
                                    <p
                                      class="sh3"
                                      :style="{
                                        width: '120px',
                                        height: '41px',
                                        lineHeight: '41px',
                                        color: title_color7,
                                        fontSize: title_size7 + 'px',
                                        fontFamily: title_famiy7
                                      }"
                                    >
                                      {{ title7 }}
                                    </p>
                                  </div>
                                </div>
                                <i
                                  class="el-icon-close"
                                  @click="closediv('showlong')"
                                ></i>
                              </div>
                            </div>
                            <!-- 定位价格标签 -->
                            <div
                              ref="showprice"
                              id="showprice"
                              class="show_tabs"
                              :style="{
                                top: potop,
                                left: poleft
                              }"
                              @mousedown="movedown($event, 'showprice')"
                            >
                              <div v-if="priceshow">
                                <div
                                  :style="{
                                    width: '370px',
                                    height:
                                      priceradio === 0
                                        ? '81px'
                                        : priceradio === 1 || priceradio === 6
                                          ? '128px'
                                          : priceradio === 2
                                            ? '100px'
                                            : priceradio === 3
                                              ? '132px'
                                              : priceradio === 4
                                                ? '70px'
                                                : priceradio === 5 || priceradio === 8
                                                  ? '99px'
                                                  : priceradio === 7
                                                    ? '93px'
                                                    : '100px'
                                  }"
                                  @click="showtabsdiv"
                                >
                                  <div
                                    class="iconfont_box"
                                    :style="{
                                      position: 'relative',
                                      width: '370px',
                                      height:
                                        priceradio === 0
                                          ? '81px'
                                          : priceradio === 1 || priceradio === 6
                                            ? '128px'
                                            : priceradio === 2
                                              ? '100px'
                                              : priceradio === 3
                                                ? '132px'
                                                : priceradio === 4
                                                  ? '70px'
                                                  : priceradio === 5 || priceradio === 8
                                                    ? '99px'
                                                    : priceradio === 7
                                                      ? '93px'
                                                      : '100px'
                                    }"
                                  >
                                    <img
                                      :src="pricebgList[priceradio]"
                                      alt=""
                                      :style="{
                                        width: '370px',
                                        height:
                                          priceradio === 0
                                            ? '81px'
                                            : priceradio === 1 || priceradio === 6
                                              ? '128px'
                                              : priceradio === 2
                                                ? '100px'
                                                : priceradio === 3
                                                  ? '132px'
                                                  : priceradio === 4
                                                    ? '70px'
                                                    : priceradio === 5 || priceradio === 8
                                                      ? '99px'
                                                      : priceradio === 7
                                                        ? '93px'
                                                        : '100px'
                                      }"
                                      srcset=""
                                    />
                                    <div
                                      class="position_text"
                                      :style="{
                                        width: '370px',
                                        overflow: 'hidden',
                                        height:
                                          priceradio === 0
                                            ? '81px'
                                            : priceradio === 1 || priceradio === 6
                                              ? '128px'
                                              : priceradio === 2
                                                ? '100px'
                                                : priceradio === 3
                                                  ? '132px'
                                                  : priceradio === 4
                                                    ? '70px'
                                                    : priceradio === 5 || priceradio === 8
                                                      ? '99px'
                                                      : priceradio === 7
                                                        ? '93px'
                                                        : '100px',
                                        top: '0px',
                                        left: '0px'
                                      }"
                                    >
                                      <!-- 文字一 -->
                                      <p
                                        class="sh1"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            priceradio === 0
                                              ? '4px'
                                              : priceradio === 1
                                                ? '89px'
                                                : priceradio === 2
                                                  ? '30px'
                                                  : priceradio === 3
                                                    ? '105px'
                                                    : priceradio === 4
                                                      ? '51px'
                                                      : priceradio === 5
                                                        ? '81px'
                                                        : priceradio === 6
                                                          ? '58px'
                                                          : priceradio === 7
                                                            ? '74px'
                                                            : '6px',
                                          left:
                                            priceradio === 0
                                              ? '19px'
                                              : priceradio === 1
                                                ? '278px'
                                                : priceradio === 2
                                                  ? '14px'
                                                  : priceradio === 3
                                                    ? '16px'
                                                    : priceradio === 4
                                                      ? '17px'
                                                      : priceradio === 5
                                                        ? '37px'
                                                        : priceradio === 6
                                                          ? '34px'
                                                          : priceradio === 7
                                                            ? '12px'
                                                            : '17px',
                                          textDecoration:
                                            priceradio === 6 || priceradio === 8
                                              ? 'line-through'
                                              : '',
                                          color: title_color8,
                                          fontSize: title_size8 + 'px',
                                          fontFamily: title_famiy8
                                        }"
                                      >
                                        {{ title8 }}
                                      </p>
                                      <!-- 文字二 -->
                                      <p
                                        class="sh2"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            priceradio === 0
                                              ? '40px'
                                              : priceradio === 1
                                                ? '50px'
                                                : priceradio === 2
                                                  ? '60px'
                                                  : priceradio === 3
                                                    ? '53px'
                                                    : priceradio === 4
                                                      ? '15px'
                                                      : priceradio === 5
                                                        ? '38px'
                                                        : priceradio === 6
                                                          ? '75px'
                                                          : priceradio === 7
                                                            ? '40px'
                                                            : '50px',
                                          left:
                                            priceradio === 0
                                              ? '23px'
                                              : priceradio === 1
                                                ? '277px'
                                                : priceradio === 2
                                                  ? '28px'
                                                  : priceradio === 3
                                                    ? '16px'
                                                    : priceradio === 4
                                                      ? '31px'
                                                      : priceradio === 5
                                                        ? '43px'
                                                        : priceradio === 6
                                                          ? '34px'
                                                          : priceradio === 7
                                                            ? '23px'
                                                            : '27px',
                                          fontWeight: 'bold',
                                          color: title_color9,
                                          fontSize: title_size9 + 'px',
                                          fontFamily: title_famiy9
                                        }"
                                      >
                                        {{ title9 }}
                                      </p>
                                      <!-- 文字三 -->
                                      <p
                                        class="sh3"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            priceradio === 0
                                              ? '12px'
                                              : priceradio === 1
                                                ? '47px'
                                                : priceradio === 2
                                                  ? '25px'
                                                  : priceradio === 3
                                                    ? '105px'
                                                    : priceradio === 4
                                                      ? '48px'
                                                      : priceradio === 5
                                                        ? '37px'
                                                        : priceradio === 6
                                                          ? '150px'
                                                          : priceradio === 7
                                                            ? '33px'
                                                            : '15px',
                                          left:
                                            priceradio === 0
                                              ? '116px'
                                              : priceradio === 1
                                                ? '22px'
                                                : priceradio === 2
                                                  ? '108px'
                                                  : priceradio === 3
                                                    ? '128px'
                                                    : priceradio === 4
                                                      ? '145px'
                                                      : priceradio === 5
                                                        ? '130px'
                                                        : priceradio === 6
                                                          ? '34px'
                                                          : priceradio === 7
                                                            ? '110px'
                                                            : '112px',
                                          color: title_color10,
                                          fontSize: title_size10 + 'px',
                                          fontFamily: title_famiy10
                                        }"
                                      >
                                        {{ title10 }}
                                      </p>
                                      <!-- 文字四 -->
                                      <p
                                        class="sh4"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            priceradio === 0
                                              ? '38px'
                                              : priceradio === 1
                                                ? '81px'
                                                : priceradio === 2
                                                  ? '50px'
                                                  : priceradio === 3
                                                    ? '55px'
                                                    : priceradio === 4
                                                      ? '10px'
                                                      : priceradio === 5
                                                        ? '56px'
                                                        : priceradio === 6
                                                          ? '85px'
                                                          : priceradio === 7
                                                            ? '51px'
                                                            : '53px',
                                          left:
                                            priceradio === 0
                                              ? '116px'
                                              : priceradio === 1
                                                ? '12px'
                                                : priceradio === 2
                                                  ? '125px'
                                                  : priceradio === 3
                                                    ? '128px'
                                                    : priceradio === 4
                                                      ? '127px'
                                                      : priceradio === 5
                                                        ? '130px'
                                                        : priceradio === 6
                                                          ? '117px'
                                                          : priceradio === 7
                                                            ? '115px'
                                                            : '112px',
                                          fontWeight: 'bold',
                                          color: title_color11,
                                          fontSize: title_size11 + 'px',
                                          fontFamily: title_famiy11
                                        }"
                                      >
                                        {{ title11 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                                <i
                                  class="el-icon-close"
                                  @click="closediv('showprice')"
                                ></i>
                              </div>
                            </div>
                          </div>
                          <!-- 导出按钮 -->
                          <div style="margin-top:10px">
                            <el-button
                              type="primary"
                              style="width:300px"
                              @click="saveYXImg('mycanvas')"
                            >合 成</el-button
                            >
                          </div>
                        </div>
                      </div>
                      <div v-show="leftshow === '5'">
                        <!-- 秒杀预告 -->
                        <div v-show="isshow === '1'">
                          <!-- 渲染dom -->
                          <div class="canvas_box2">
                            <div id="miaocanvas" class="mycanvas" ref="miaocanvas">
                              <div style="position:relative">
                                <el-carousel
                                  style="border-radius: 10px;"
                                  indicator-position="none"
                                  height="185px"
                                  :autoplay="false"
                                >
                                  <el-carousel-item
                                    v-for="item in miaoimglist"
                                    :key="item.url"
                                  >
                                    <el-image
                                      style="width: 100%;"
                                      :src="item.url"
                                      fit="cover"
                                      crossOrigin="Anonymous"
                                    ></el-image>
                                    <div class="position_box">
                                      <p
                                        class="show_title"
                                        :style="{
                                          fontWeight: '700',
                                          lineHeight: '63px',
                                          color: title_color1,
                                          fontSize: title_size1 + 'px',
                                          fontFamily: title_famiy1
                                        }"
                                      >
                                        {{ title1 }}
                                      </p>
                                      <p
                                        class="show_title"
                                        :style="{
                                          lineHeight: '27px',
                                          color: title_color2,
                                          fontSize: title_size2 + 'px',
                                          fontFamily: title_famiy2
                                        }"
                                      >
                                        {{ title2 }}
                                      </p>
                                    </div>
                                  </el-carousel-item>
                                </el-carousel>
                              </div>
                              <div class="miaolist">
                                <el-radio-group
                                  v-model="miaoradio"
                                  @change="miaoradiochange"
                                >
                                  <el-radio
                                    v-for="(item, index) in miaoList"
                                    :label="index"
                                    :key="index"
                                  >
                                    <div class="miao_main">
                                      <div
                                        class="miao_img"
                                        :style="{
                                          height: '162px',
                                          background: item.isblue
                                            ? '#7930EB'
                                            : '#FE5A12',
                                          backgroundRepeat: 'no-repeat',
                                          backgroundSize: '100% 100%'
                                        }"
                                      >
                                        <div class="bg_num">{{ index + 1 }}</div>
                                        <div class="miao_uploadone">
                                          <div
                                            v-if="item.imgurl === ''"
                                            style="width:139px;height:139px"
                                          >
                                            <el-upload
                                              style="width:139px;height:139px; background-color:#fff;border-radius:12px"
                                              class="avatar-uploader"
                                              :action="uploadaction"
                                              :on-success="
                                                (res, file, fileList, val) => {
                                                  uploadSuccess6(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index
                                                  )
                                                }
                                              "
                                              :on-error="uploadError"
                                              :limit="1"
                                              :multiple="false"
                                              :show-file-list="false"
                                              :before-upload="beforeAvatarUpload"
                                            >
                                              <div
                                                style="width:100%;height:100%;line-height:139px;"
                                              >
                                                <div
                                                  style="font-size:35px;color:black;"
                                                >
                                                  <div style="font-size:14px">
                                                    点击上传图片{{ index + 1 }}
                                                  </div>
                                                </div>
                                              </div>
                                            </el-upload>
                                          </div>
                                          <div v-else class="img_box">
                                            <el-image
                                              style="width:139px;height:139px"
                                              :src="item.imgurl"
                                              fit="fill"
                                              crossOrigin="Anonymous"
                                            ></el-image>
                                            <i
                                              class="el-icon-close"
                                              @click="closeimg(6, index)"
                                            ></i>
                                          </div>
                                        </div>
                                        <div class="rigtitle">
                                          <div class="toptie">
                                            <p
                                              class="show_title"
                                              :style="{
                                                color: item.font[0].title_color1,
                                                fontSize:
                                                  item.font[0].title_size1 + 'px'
                                              }"
                                            >
                                              {{ item.font[0].title1 }}
                                            </p>
                                            <div
                                              v-if="composingstyle === 2"
                                              style="margin-top:15px;"
                                            >
                                              <p
                                                class="show_title"
                                                :style="{
                                                  padding: '8px 0',
                                                  textAlign: 'left',
                                                  color: item.font[0].title_color2,
                                                  fontSize:
                                                    item.font[0].title_size2 + 'px'
                                                }"
                                              >
                                                <span
                                                  :style="{
                                                    padding: '3px',
                                                    background: item.isblue
                                                      ? '#5E13CE'
                                                      : '#F24F0E',
                                                    borderRadius: '5px'
                                                  }"
                                                >
                                                  原价</span
                                                >{{ item.font[0].title2 }}
                                              </p>
                                              <p
                                                class="show_title"
                                                :style="{
                                                  padding: '8px 0',
                                                  textAlign: 'left',
                                                  color: item.font[0].title_color3,
                                                  fontSize:
                                                    item.font[0].title_size3 + 'px'
                                                }"
                                              >
                                                <span
                                                  :style="{
                                                    padding: '3px',
                                                    background: item.isblue
                                                      ? '#5E13CE'
                                                      : '#F24F0E',
                                                    borderRadius: '5px'
                                                  }"
                                                >
                                                  卷后价</span
                                                  >
                                                {{ item.font[0].title3 }}
                                              </p>
                                            </div>
                                            <div
                                              v-else
                                              style="height:32px;margin-top:30px;text-align:left;"
                                            >
                                              <span
                                                :style="{
                                                  dispaly: 'inline-block',
                                                  textAlign: 'left',
                                                  color: item.font[0].title_color3,
                                                  fontSize:
                                                    item.font[0].title_size3 + 'px'
                                                }"
                                              >
                                                <span
                                                  :style="{
                                                    padding: '3px',
                                                    background: item.isblue
                                                      ? '#5E13CE'
                                                      : '#F24F0E',
                                                    borderRadius: '5px'
                                                  }"
                                                >卷后价</span
                                                >
                                                {{ item.font[0].title3 }}
                                              </span>
                                              <span
                                                :style="{
                                                  textDecoration: 'line-through',
                                                  padding: '10px 0',
                                                  textAlign: 'left',
                                                  color: item.font[0].title_color2,
                                                  fontSize:
                                                    item.font[0].title_size2 + 'px'
                                                }"
                                              >
                                                {{ item.font[0].title2 }}
                                              </span>
                                            </div>
                                            <p
                                              class="show_title"
                                              :style="{
                                                position: 'absolute',
                                                bottom: '10px',
                                                width: '180px',
                                                zIndex: '2',
                                                borderRadius: '10px',
                                                height: '30px',
                                                lineHeight: '30px',
                                                backgroundColor: item.isblue
                                                  ? '#DD19BF'
                                                  : '#FFBC00',
                                                margin: '10px 0',
                                                textAlign: 'center',
                                                color: item.font[0].title_color4,
                                                fontSize:
                                                  item.font[0].title_size4 + 'px'
                                              }"
                                            >
                                              {{ item.font[0].title4 }}
                                            </p>
                                          </div>
                                        </div>
                                      </div>
                                      <i
                                        class="el-icon-close"
                                        style="top: 11px;"
                                        @click="colsemiaolist"
                                      ></i>
                                    </div>
                                  </el-radio>
                                </el-radio-group>
                              </div>
                            </div>
                            <!-- 新增按钮 -->
                            <div style="margin-top:10px">
                              <el-button
                                type="primary"
                                style="width:300px"
                                @click="doaddlist"
                              >添 加</el-button
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 爆款汇总 -->
                        <div v-show="isshow === '2'">
                          <!-- 渲染dom -->
                          <div class="canvas_box3">
                            <div id="baocanvas" class="mycanvas" ref="baocanvas">
                              <div class="top_bg">
                                <div class="position_box">
                                  <p
                                    class="show_title"
                                    :style="{
                                      fontWeight: '700',
                                      lineHeight: '63px',
                                      color: title_color1,
                                      fontSize: title_size1 + 'px',
                                      fontFamily: title_famiy1
                                    }"
                                  >
                                    {{ title1 }}
                                  </p>
                                  <p
                                    class="show_title"
                                    :style="{
                                      lineHeight: '40px',
                                      color: title_color2,
                                      fontSize: title_size2 + 'px',
                                      fontFamily: title_famiy2
                                    }"
                                  >
                                    {{ title2 }}
                                  </p>
                                </div>
                              </div>
                              <div class="miaolist">
                                <el-radio-group
                                  v-model="baoradio"
                                  @change="baoradiochange"
                                >
                                  <el-radio
                                    v-for="(item, index) in baoList"
                                    :label="index"
                                    :key="index"
                                  >
                                    <div class="miao_main">
                                      <div
                                        class="miao_img"
                                        :style="{
                                          height: '156px',
                                          backgroundImage: 'url(' + hot + ')',
                                          backgroundRepeat: 'no-repeat',
                                          backgroundSize: '100% 100%'
                                        }"
                                      >
                                        <div class="miao_uploadone">
                                          <div
                                            v-if="item.imgurl === ''"
                                            style="width:139px;height:139px"
                                          >
                                            <el-upload
                                              style="width:139px;height:139px; background-color:#fff;border-radius:12px"
                                              class="avatar-uploader"
                                              :action="uploadaction"
                                              :on-success="
                                                (res, file, fileList, val) => {
                                                  uploadSuccess7(
                                                    res,
                                                    file,
                                                    fileList,
                                                    index
                                                  )
                                                }
                                              "
                                              :on-error="uploadError"
                                              :limit="1"
                                              :multiple="false"
                                              :show-file-list="false"
                                              :before-upload="beforeAvatarUpload"
                                            >
                                              <div
                                                style="width:100%;height:100%;line-height:139px;background-color:#fff;border-radius:12px"
                                              >
                                                <div
                                                  style="font-size:35px;color:black;"
                                                >
                                                  <div style="font-size:14px">
                                                    点击上传图片{{ index + 1 }}
                                                  </div>
                                                </div>
                                              </div>
                                            </el-upload>
                                          </div>
                                          <div v-else class="img_box">
                                            <el-image
                                              style="width:139px;height:139px"
                                              :src="item.imgurl"
                                              fit="fill"
                                              crossOrigin="Anonymous"
                                            ></el-image>
                                            <i
                                              class="el-icon-close"
                                              @click="closeimg(7, index)"
                                            ></i>
                                          </div>
                                        </div>
                                        <div class="rigtitle">
                                          <div class="toptie">
                                            <p
                                              class="show_title"
                                              :style="{
                                                color: item.font[0].title_color1,
                                                fontSize:
                                                  item.font[0].title_size1 + 'px'
                                              }"
                                            >
                                              {{ item.font[0].title1 }}
                                            </p>
                                            <p
                                              :style="{
                                                width: '100%',
                                                overflow: 'hidden',
                                                paddingTop: '12px',
                                                textAlign: 'left',
                                                whiteSpace: 'initial',
                                                color: item.font[0].title_color2,
                                                fontSize:
                                                  item.font[0].title_size2 + 'px'
                                              }"
                                            >
                                              {{ item.font[0].title2 }}
                                            </p>
                                            <div class="issue_box">
                                              <p
                                                class="show_title"
                                                :style="{
                                                  marginRight: '8px',
                                                  color: item.font[0].title_color3,
                                                  fontSize:
                                                    item.font[0].title_size3 + 'px'
                                                }"
                                              >
                                                {{ item.font[0].title3 }}单
                                              </p>

                                              <p
                                                class="show_title"
                                                :style="{
                                                  textAlign: 'center',
                                                  color: item.font[0].title_color4,
                                                  fontSize:
                                                    item.font[0].title_size4 + 'px'
                                                }"
                                              >
                                                {{ item.font[0].title4 }}
                                              </p>
                                            </div>
                                          </div>
                                        </div>
                                        <div
                                          :style="{
                                            width: '28px',
                                            height: '32px',
                                            top: '0px',
                                            left: 0,
                                            position: 'absolute',
                                            backgroundImage: 'url(' + baoicon + ')',
                                            backgroundRepeat: 'no-repeat',
                                            backgroundSize: '100% 100%'
                                          }"
                                        >
                                          <div
                                            style="color:white;line-height:32px;text-align:center;font-size:22px;font-weight:600"
                                          >
                                            {{ index + 1 }}
                                          </div>
                                        </div>
                                      </div>
                                      <i
                                        class="el-icon-close"
                                        style="top: 11px;"
                                        @click="colsebaolist"
                                      ></i>
                                    </div>
                                  </el-radio>
                                </el-radio-group>
                              </div>
                            </div>
                            <!-- 新增按钮 -->
                            <div style="margin-top:10px">
                              <el-button
                                type="primary"
                                style="width:300px"
                                @click="addbaolist"
                              >添 加</el-button
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </el-col>
                  <!-- 中间设置控制台 -->
                  <el-col :span="14">

                    <div class="main_box" :style="{ height: cardheight + 'px' }">
                      <div class="main_top">
                        <el-radio-group v-model="leftshow" @change="setchange">
                          <el-radio-button label="1">拼图模板</el-radio-button>
                          <el-radio-button label="2">圆形标签</el-radio-button>
                          <el-radio-button label="3">长条标签</el-radio-button>
                          <el-radio-button label="4">价格标签</el-radio-button>
                          <el-radio-button label="5">商品列表</el-radio-button>
                        </el-radio-group>
                      </div>
                      <div class="main_content">
                        <div v-show="leftshow === '1'">
                          <div class="show_top1">
                            <div class="uploadradio">
                              <el-radio-group
                                v-model="uploadradio"
                                @change="uplradchange"
                              >
                                <el-radio :label="1">
                                  <div class="templatebox temp1">
                                    <span class="img1"></span>
                                  </div>
                                </el-radio>
                                <el-radio :label="2">
                                  <div class="templatebox temp2">
                                    <span class="img1"></span>
                                    <span class="img2"></span>
                                    <span class="img3"></span>
                                  </div>
                                </el-radio>
                                <el-radio :label="3">
                                  <div class="templatebox temp3">
                                    <span class="img1"></span>
                                    <div class="flexin">
                                      <span class="img2"></span>
                                      <span class="img3"></span>
                                    </div>
                                  </div>
                                </el-radio>
                                <el-radio :label="4">
                                  <div class="templatebox temp4">
                                    <span class="img1"></span>
                                    <span class="img2"></span>
                                    <span class="img3"></span>
                                    <span class="img4"></span>
                                  </div>
                                </el-radio>
                                <el-radio :label="5">
                                  <div class="templatebox temp5">
                                    <div>
                                      <span class="img1"></span>
                                      <span class="img4"></span>
                                    </div>
                                    <div>
                                      <span class="img2"></span>
                                      <span class="img3"></span>
                                      <span class="img5"></span>
                                    </div>
                                  </div>
                                </el-radio>
                                <el-radio :label="6">
                                  <div class="templatebox temp6">
                                    <div>
                                      <span class="img1"></span>
                                      <span class="img2"></span>
                                      <span class="img3"></span>
                                      <span class="img4"></span>
                                      <span class="img5"></span>
                                    </div>
                                  </div>
                                </el-radio>
                              </el-radio-group>
                            </div>
                          </div>
                        </div>
                        <div v-show="leftshow === '2'">
                          <div class="graph3_box">
                            <el-radio-group v-model="smallLabel" @change="smallchange">
                              <el-radio
                                :label="index"
                                class="test"
                                v-for="(item, index) in roundbgList"
                                :key="index"
                              >
                                <div class="top_img graph3" @click="showtabsdiv">
                                  <div class="iconfont_box">
                                    <img
                                      :src="item"
                                      alt=""
                                      :style="{
                                        width:
                                          sizeradio === '1'
                                            ? '120px'
                                            : sizeradio === '2'
                                              ? '150px'
                                              : '160px',
                                        marginTop:
                                          sizeradio === '1'
                                            ? '15px'
                                            : sizeradio === '2'
                                              ? '12px'
                                              : '11px'
                                      }"
                                      srcset=""
                                    />
                                    <div
                                      class="position_text"
                                      :style="{
                                        width:
                                          sizeradio === '1'
                                            ? '120px'
                                            : sizeradio === '2'
                                              ? '150px'
                                              : '160px',
                                        height:
                                          sizeradio === '1'
                                            ? '120px'
                                            : sizeradio === '2'
                                              ? '150px'
                                              : '160px',
                                        top:
                                          sizeradio === '1'
                                            ? '15px'
                                            : sizeradio === '2'
                                              ? '12px'
                                              : '11px',
                                        left:
                                          sizeradio === '1'
                                            ? '28px'
                                            : sizeradio === '2'
                                              ? '12px'
                                              : '8px'
                                      }"
                                    >
                                      <!-- 文字一 -->
                                      <p
                                        class="sh1"
                                        :style="{
                                          marginTop:
                                            sizeradio === '1'
                                              ? '27px'
                                              : sizeradio === '2'
                                                ? '35px'
                                                : '40px',
                                          height: '14px',
                                          fontWeight: 'bold',
                                          color:
                                            index === 8
                                              ? '#fc4b4b'
                                              : index === 9
                                                ? '#563cf6'
                                                : index === 11
                                                  ? '#813f25'
                                                  : title_color1,
                                          fontSize: title_size1 + 'px',
                                          fontFamily: title_famiy1
                                        }"
                                      >
                                        {{ title1 }}
                                      </p>
                                      <!-- 文字二 -->
                                      <p
                                        class="sh2"
                                        :style="{
                                          height: '13px',
                                          marginTop:
                                            sizeradio === '1'
                                              ? '5px'
                                              : sizeradio === '2'
                                                ? '10px'
                                                : '10px',
                                          color:
                                            index === 8
                                              ? '#fc4b4b'
                                              : index === 9
                                                ? '#563cf6'
                                                : index === 11
                                                  ? '#813f25'
                                                  : title_color2,
                                          fontSize: title_size2 + 'px',
                                          fontFamily: title_famiy2
                                        }"
                                      >
                                        {{ title2 }}
                                      </p>
                                      <!-- 文字三 -->
                                      <p
                                        class="sh3"
                                        :style="{
                                          height: '13px',
                                          marginTop:
                                            sizeradio === '1'
                                              ? '0px'
                                              : sizeradio === '2'
                                                ? '5px'
                                                : '6px',
                                          color:
                                            index === 8
                                              ? '#fc4b4b'
                                              : index === 9
                                                ? '#563cf6'
                                                : index === 11
                                                  ? '#813f25'
                                                  : title_color3,
                                          fontSize: title_size3 + 'px',
                                          fontFamily: title_famiy3
                                        }"
                                      >
                                        {{ title3 }}
                                      </p>
                                      <!-- 文字四 -->
                                      <p
                                        class="sh4"
                                        :style="{
                                          height: '13px',
                                          marginTop:
                                            sizeradio === '1'
                                              ? '4px'
                                              : sizeradio === '2'
                                                ? '6px'
                                                : '7px',
                                          color: title_color4,
                                          fontSize: title_size4 + 'px',
                                          fontFamily: title_famiy4
                                        }"
                                      >
                                        {{ title4 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </el-radio>
                            </el-radio-group>
                          </div>
                          <div class="set_box">
                            <!-- 尺寸 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >尺寸</span
                              >
                              <el-select
                                v-model="sizeradio"
                                placeholder="请选择尺寸"
                                @change="sizechange"
                              >
                                <el-option label="小" value="1">
                                  小
                                </el-option>
                                <el-option label="中" value="2">
                                  中
                                </el-option>
                                <el-option label="大" value="3">
                                  大
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字一 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字一</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title1"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size1" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color1"></el-color-picker>
                              <el-select v-model="title_famiy1" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字二 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字二</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title2"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size2" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color2"></el-color-picker>
                              <el-select v-model="title_famiy2" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字三 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title3"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size3" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color3"></el-color-picker>
                              <el-select v-model="title_famiy3" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字四 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字四</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title4"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size4" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color4"></el-color-picker>
                              <el-select v-model="title_famiy3" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                        <div v-show="leftshow === '3'">
                          <div class="graph4_box">
                            <el-radio-group v-model="stripradio" @change="stripchange">
                              <el-radio
                                :label="index"
                                class="test"
                                v-for="(item, index) in stripbgList"
                                :key="index"
                              >
                                <div class="top_img graph3" @click="showtabsdiv">
                                  <div class="iconfont_box">
                                    <img
                                      :src="item"
                                      alt=""
                                      :style="{
                                        width: '400px',
                                        height: '41px'
                                      }"
                                      srcset=""
                                    />
                                    <div
                                      class="position_text"
                                      :style="{
                                        width: '400px',
                                        height: '41px',
                                        top: '0px',
                                        left: '0px'
                                      }"
                                    >
                                      <!-- 文字一 -->
                                      <p
                                        class="sh1"
                                        :style="{
                                          color: title_color5,
                                          fontSize: title_size5 + 'px',
                                          fontFamily: title_famiy5
                                        }"
                                      >
                                        {{ title5 }}
                                      </p>
                                      <!-- 文字二 -->
                                      <p
                                        class="sh2"
                                        :style="{
                                          color: title_color6,
                                          fontSize: title_size6 + 'px',
                                          fontFamily: title_famiy6
                                        }"
                                      >
                                        {{ title6 }}
                                      </p>
                                      <!-- 文字三 -->
                                      <p
                                        class="sh3"
                                        :style="{
                                          color: title_color7,
                                          fontSize: title_size7 + 'px',
                                          fontFamily: title_famiy7
                                        }"
                                      >
                                        {{ title7 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </el-radio>
                            </el-radio-group>
                          </div>
                          <div class="set_box">
                            <!-- 文字一 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字一</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title5"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size5" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color5"></el-color-picker>
                              <el-select v-model="title_famiy5" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字二 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字二</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title6"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size6" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color6"></el-color-picker>
                              <el-select v-model="title_famiy6" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字三 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title7"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size7" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color7"></el-color-picker>
                              <el-select v-model="title_famiy7" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                        <div v-show="leftshow === '4'">
                          <div class="graph5_box">
                            <el-radio-group v-model="priceradio" @change="pricechange">
                              <el-radio
                                :label="index"
                                class="test"
                                v-for="(item, index) in pricebgList"
                                :key="index"
                              >
                                <div
                                  class="top_img graph3"
                                  :style="{
                                    height:
                                      index === 0
                                        ? '81px'
                                        : index === 1 || index === 6
                                          ? '128px'
                                          : index === 2
                                            ? '100px'
                                            : index === 3
                                              ? '132px'
                                              : index === 4
                                                ? '70px'
                                                : index === 5 || index === 8
                                                  ? '99px'
                                                  : index === 7
                                                    ? '93px'
                                                    : '100px'
                                  }"
                                  @click="showtabsdiv"
                                >
                                  <div
                                    class="iconfont_box"
                                    :style="{
                                      height:
                                        index === 0
                                          ? '81px'
                                          : index === 1 || index === 6
                                            ? '128px'
                                            : index === 2
                                              ? '100px'
                                              : index === 3
                                                ? '132px'
                                                : index === 4
                                                  ? '70px'
                                                  : index === 5 || index === 8
                                                    ? '99px'
                                                    : index === 7
                                                      ? '93px'
                                                      : '100px'
                                    }"
                                  >
                                    <img
                                      :src="item"
                                      alt=""
                                      :style="{
                                        width: '360px',
                                        height:
                                          index === 0
                                            ? '81px'
                                            : index === 1 || index === 6
                                              ? '128px'
                                              : index === 2
                                                ? '100px'
                                                : index === 3
                                                  ? '132px'
                                                  : index === 4
                                                    ? '70px'
                                                    : index === 5 || index === 8
                                                      ? '99px'
                                                      : index === 7
                                                        ? '93px'
                                                        : '100px'
                                      }"
                                      srcset=""
                                    />
                                    <div
                                      class="position_text"
                                      :style="{
                                        width: '360px',
                                        height:
                                          index === 0
                                            ? '81px'
                                            : index === 1 || index === 6
                                              ? '128px'
                                              : index === 2
                                                ? '100px'
                                                : index === 3
                                                  ? '132px'
                                                  : index === 4
                                                    ? '70px'
                                                    : index === 5 || index === 8
                                                      ? '99px'
                                                      : index === 7
                                                        ? '93px'
                                                        : '100px',
                                        top: '0px',
                                        left: '0px'
                                      }"
                                    >
                                      <!-- 文字一 -->
                                      <p
                                        class="sh1"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            index === 0
                                              ? '7px'
                                              : index === 1
                                                ? '91px'
                                                : index === 2
                                                  ? '33px'
                                                  : index === 3
                                                    ? '108px'
                                                    : index === 4
                                                      ? '54px'
                                                      : index === 5
                                                        ? '81px'
                                                        : index === 6
                                                          ? '58px'
                                                          : index === 7
                                                            ? '76px'
                                                            : '15px',
                                          left:
                                            index === 0
                                              ? '17px'
                                              : index === 1
                                                ? '271px'
                                                : index === 2
                                                  ? '14px'
                                                  : index === 3
                                                    ? '16px'
                                                    : index === 4
                                                      ? '17px'
                                                      : index === 5
                                                        ? '37px'
                                                        : index === 6
                                                          ? '34px'
                                                          : index === 7
                                                            ? '12px'
                                                            : '7px',
                                          textDecoration:
                                            index === 6 || index === 8
                                              ? 'line-through'
                                              : '',
                                          color: title_color8,
                                          fontSize: title_size8 + 'px',
                                          fontFamily: title_famiy8
                                        }"
                                      >
                                        {{ title8 }}
                                      </p>
                                      <!-- 文字二 -->
                                      <p
                                        class="sh2"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            index === 0
                                              ? '43px'
                                              : index === 1
                                                ? '50px'
                                                : index === 2
                                                  ? '63px'
                                                  : index === 3
                                                    ? '53px'
                                                    : index === 4
                                                      ? '20px'
                                                      : index === 5
                                                        ? '41px'
                                                        : index === 6
                                                          ? '78px'
                                                          : index === 7
                                                            ? '46px'
                                                            : '63px',
                                          left:
                                            index === 0
                                              ? '23px'
                                              : index === 1
                                                ? '271px'
                                                : index === 2
                                                  ? '28px'
                                                  : index === 3
                                                    ? '16px'
                                                    : index === 4
                                                      ? '31px'
                                                      : index === 5
                                                        ? '43px'
                                                        : index === 6
                                                          ? '34px'
                                                          : index === 7
                                                            ? '23px'
                                                            : '27px',
                                          fontWeight: 'bold',
                                          color: title_color9,
                                          fontSize: title_size9 + 'px',
                                          fontFamily: title_famiy9
                                        }"
                                      >
                                        {{ title9 }}
                                      </p>
                                      <!-- 文字三 -->
                                      <p
                                        class="sh3"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            index === 0
                                              ? '17px'
                                              : index === 1
                                                ? '50px'
                                                : index === 2
                                                  ? '29px'
                                                  : index === 3
                                                    ? '111px'
                                                    : index === 4
                                                      ? '51px'
                                                      : index === 5
                                                        ? '40px'
                                                        : index === 6
                                                          ? '150px'
                                                          : index === 7
                                                            ? '36px'
                                                            : '17px',
                                          left:
                                            index === 0
                                              ? '116px'
                                              : index === 1
                                                ? '22px'
                                                : index === 2
                                                  ? '99px'
                                                  : index === 3
                                                    ? '128px'
                                                    : index === 4
                                                      ? '145px'
                                                      : index === 5
                                                        ? '125px'
                                                        : index === 6
                                                          ? '34px'
                                                          : index === 7
                                                            ? '105px'
                                                            : '112px',
                                          color: title_color10,
                                          fontSize: title_size10 + 'px',
                                          fontFamily: title_famiy10
                                        }"
                                      >
                                        {{ title10 }}
                                      </p>
                                      <!-- 文字四 -->
                                      <p
                                        class="sh4"
                                        :style="{
                                          position: 'absolute',
                                          top:
                                            index === 0
                                              ? '43px'
                                              : index === 1
                                                ? '81px'
                                                : index === 2
                                                  ? '55px'
                                                  : index === 3
                                                    ? '61px'
                                                    : index === 4
                                                      ? '14px'
                                                      : index === 5
                                                        ? '60px'
                                                        : index === 6
                                                          ? '90px'
                                                          : index === 7
                                                            ? '56px'
                                                            : '53px',
                                          left:
                                            index === 0
                                              ? '116px'
                                              : index === 1
                                                ? '12px'
                                                : index === 2
                                                  ? '122px'
                                                  : index === 3
                                                    ? '124px'
                                                    : index === 4
                                                      ? '123px'
                                                      : index === 5
                                                        ? '127px'
                                                        : index === 6
                                                          ? '115px'
                                                          : index === 7
                                                            ? '112px'
                                                            : '112px',
                                          fontWeight: 'bold',
                                          color: title_color11,
                                          fontSize: title_size11 + 'px',
                                          fontFamily: title_famiy11
                                        }"
                                      >
                                        {{ title11 }}
                                      </p>
                                    </div>
                                  </div>
                                </div>
                              </el-radio>
                            </el-radio-group>
                          </div>
                          <!-- 操作 -->
                          <div class="set_box">
                            <!-- 文字一 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字一</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title8"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size8" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color8"></el-color-picker>
                              <el-select v-model="title_famiy8" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字二 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字二</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title9"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size9" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker v-model="title_color9"></el-color-picker>
                              <el-select v-model="title_famiy9" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字三 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title10"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size10" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color10"
                              ></el-color-picker>
                              <el-select v-model="title_famiy10" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                            <!-- 文字四 -->
                            <div class="display" style="padding-top:20px;">
                              <span
                                style="dispaly:inline-block;width:70px;font-size:14px"
                              >文字三</span
                              >
                              <el-input
                                style="width:160px"
                                v-model="title11"
                                placeholder="请输入内容"
                              ></el-input>
                              <el-select v-model="title_size11" style="width:70px">
                                <el-option
                                  v-for="item in sizeList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                              <el-color-picker
                                v-model="title_color11"
                              ></el-color-picker>
                              <el-select v-model="title_famiy11" style="width:120px">
                                <el-option
                                  v-for="item in famiyList"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                >
                                </el-option>
                              </el-select>
                            </div>
                          </div>
                        </div>
                        <div v-show="leftshow === '5'">
                          <div style="padding:10px 0;">
                            <el-radio
                              v-model="isshow"
                              size="small"
                              label="1"
                              border
                            >好货预告</el-radio
                            >
                            <el-radio
                              v-model="isshow"
                              size="small"
                              label="2"
                              border
                            >爆款汇总</el-radio
                            >
                          </div>
                          <div v-if="isshow === '1'">
                            <div>
                              <div class="set_box">
                                <!-- 主题风格 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >主题风格</span
                                  >
                                  <el-select
                                    v-model="stylechoose"
                                    placeholder="请选择主题风格"
                                    @change="stylechoosechange"
                                  >
                                    <el-option
                                      v-for="item in stylechooseList"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                </div>
                                <!-- 排版风格 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >排版风格</span
                                  >
                                  <el-select
                                    v-model="composingstyle"
                                    placeholder="请选择排版风格"
                                    @change="composingstylechange"
                                  >
                                    <el-option
                                      v-for="item in composingstyleList"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                </div>
                                <!-- 文字一 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >文字一</span
                                  >
                                  <el-input
                                    style="width:220px"
                                    v-model="title1"
                                    placeholder="请输入内容"
                                  ></el-input>
                                  <el-select v-model="title_size1" style="width:70px">
                                    <el-option
                                      v-for="item in sizeList2"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                  <el-color-picker
                                    v-model="title_color1"
                                    :predefine="predefineColors"
                                  ></el-color-picker>
                                </div>
                                <!-- 文字二 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >文字二</span
                                  >
                                  <el-input
                                    style="width:220px"
                                    v-model="title2"
                                    placeholder="请输入内容"
                                  ></el-input>
                                  <el-select v-model="title_size2" style="width:70px">
                                    <el-option
                                      v-for="item in sizeList2"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                  <el-color-picker
                                    v-model="title_color2"
                                    :predefine="predefineColors"
                                  ></el-color-picker>
                                </div>
                                <!-- 文字三-六 -->
                                <div v-if="miaoList.length > 0">
                                  <div
                                    class="miao00"
                                    v-for="(item, index) in miaoList[miaoradio].font"
                                    :key="index"
                                  >
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text1 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title1"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size1"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color1"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text2 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title2"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size2"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color2"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text3 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title3"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size3"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color3"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text4 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title4"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size4"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color4"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="main_btn">
                              <div style="margin:20px 0;width:100%;margin-right:20px">
                                <!-- 导出按钮 -->
                                <div style="display: none;">
                                  <input
                                    type="file"
                                    name="upload"
                                    id="upload"
                                    style="display: none;"
                                  />
                                </div>
                                <el-button
                                  type="primary"
                                  size="small"
                                  @click="saveAsImg('miaocanvas')"
                                >合 成</el-button
                                >
                                <el-button
                                  type="primary"
                                  size="small"
                                  @mousedown.native="handleOk2('miaoimg')"
                                  @click="handleOk('miaoimg')"
                                >复制</el-button
                                >
                                <a
                                  download="营销图"
                                  :href="saveurl"
                                  style="width:100%;height:100%;margin-left:10px"
                                >
                                  <el-button type="primary" size="small">
                                    保存
                                  </el-button>
                                </a>
                              </div>
                              <div>
                                <!-- style="width: 150px; height: 300px" -->
                                <el-image
                                  id="miaoimg"
                                  v-if="dourl !== ''"
                                  :src="dourl"
                                  fit="cover"
                                ></el-image>
                              </div>
                            </div>
                          </div>
                          <div v-else>
                            <div>
                              <div class="set_box">
                                <!-- 文字一 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >文字一</span
                                  >
                                  <el-input
                                    style="width:220px"
                                    v-model="title1"
                                    placeholder="请输入内容"
                                  ></el-input>
                                  <el-select v-model="title_size1" style="width:70px">
                                    <el-option
                                      v-for="item in sizeList2"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                  <el-color-picker
                                    v-model="title_color1"
                                    :predefine="predefineColors"
                                  ></el-color-picker>
                                </div>
                                <!-- 文字二 -->
                                <div class="display" style="padding-top:20px;">
                                  <span
                                    style="dispaly:inline-block;width:70px;font-size:14px"
                                  >文字二</span
                                  >
                                  <el-input
                                    style="width:220px"
                                    v-model="title2"
                                    placeholder="请输入内容"
                                  ></el-input>
                                  <el-select v-model="title_size2" style="width:70px">
                                    <el-option
                                      v-for="item in sizeList2"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                    >
                                    </el-option>
                                  </el-select>
                                  <el-color-picker
                                    v-model="title_color2"
                                    :predefine="predefineColors"
                                  ></el-color-picker>
                                </div>
                                <!-- 文字三-六 -->
                                <div v-if="baoList.length > 0">
                                  <div
                                    class="miao00"
                                    v-for="(item, index) in baoList[baoradio].font"
                                    :key="index"
                                  >
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text1 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title1"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size1"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color1"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text2 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title2"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size2"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color2"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text3 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title3"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size3"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color3"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                    <div class="display" style="padding-top:20px;">
                                      <span
                                        style="dispaly:inline-block;width:70px;font-size:14px"
                                      >{{ item.text4 }}</span
                                      >
                                      <el-input
                                        style="width:220px"
                                        v-model="item.title4"
                                        placeholder="请输入内容"
                                      ></el-input>
                                      <el-select
                                        v-model="item.title_size4"
                                        style="width:70px"
                                      >
                                        <el-option
                                          v-for="ite in sizeList"
                                          :key="ite.value"
                                          :label="ite.label"
                                          :value="ite.value"
                                        >
                                        </el-option>
                                      </el-select>
                                      <el-color-picker
                                        v-model="item.title_color4"
                                        :predefine="predefineColors"
                                      ></el-color-picker>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <div class="main_btn">
                              <div style="margin:20px 0;width:100%;margin-right:20px">
                                <!-- 导出按钮 -->
                                <el-button
                                  type="primary"
                                  size="small"
                                  @click="saveAsImg('baocanvas')"
                                >合 成</el-button
                                >
                                <el-button
                                  type="primary"
                                  size="small"
                                  @mousedown.native="handleOk2('baoimg')"
                                  @click="handleOk('baoimg')"
                                >复制</el-button
                                >
                                <a
                                  download="营销图"
                                  :href="saveurl"
                                  style="width:100%;height:100%;margin-left:10px"
                                >
                                  <el-button type="primary" size="small">
                                    保存
                                  </el-button>
                                </a>
                              </div>
                              <div>
                                <!-- style="width: 150px; height: 300px" -->
                                <el-image
                                  id="baoimg"
                                  v-if="dourl !== ''"
                                  :src="dourl"
                                  fit="cover"
                                ></el-image>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </el-col>
                </el-row>
                <!-- </el-card> -->
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
import { uploadBase } from '@/api/goods.js' // base64上传
import html2canvas from 'html2canvas'
import vueEmoji from '@/components/emoji.vue'
import { emoji } from '@/utils/emoji.js'
  import {
    doDetectionGoods,
    doDetectionCoupon,
    getClassList,
    doAddGoods,
    getGoodsBrand,
    getEvaluateImgs
  } from '@/api/goods'
  import Moment from 'moment'
  export default {
    name: 'Addgoods',
    components: {
      vueEmoji,
      VNodes: {
        functional: true,
        render: (h, ctx) => ctx.props.vnodes
      }
    },
    data () {
      return {
        emoji,
        ischack: true,
        show2: false,
        showEmoji: false,
        data: [],
        btnloading: false,
        goodsurldis: false,
        showDialog: false,
        tags: [],
        inputVisible: false,
        inputValue: '',
        loadingbtn: false,
        chooseimged: [],
        imgsList: [],
        evaimgs: false,
        salecount: 0,
        current: 1,
        endOpen: false,
        endValue: null,
        startshow: 1,
        previewVisible: false,
        previewImage: '',
        fileList: [],
        goodsinfoimg: [], // 商品细节图
        loading: false,
        videourl: '', // 视频地址
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        },
        form: {
          // id: '',
          goods_url: '', // 商品地址
          goods_type: '', // 商品类型
          coupon_url: '', // 优惠劵地址
          goods_class_id: '', // 商品分类id
          brand_id: '', // 商品品牌id
          goods_img: '', // 商品主图
          marketing_img: '', // 营销长图
          goods_xj_img: '', // 商品细节图
          goods_name: '', // 商品名称
          goods_price: '', // 商品价格
          goods_short_name: '', // 商品短标题
          commission_bl: '', // 佣金比例
          goods_copywriting: '', // 商品文案
          turn_copywriting: '', // 转载文案
          friend_copywriting: '', // 朋友圈文案
          search_label: '', // 搜索标签
          shop_id: '', // 商家id
          shop_name: '', // 商家名称
          goods_start_time: '', // 商品开始时间
          coupon_discount: '', // 优惠劵面值
          goods_after_price: '', // 劵后价
          coupon_start_time: '', // 优惠卷开始时间
          coupon_end_time: '', // 优惠卷结束时间
          coupon_all_num: '', // 优惠劵总数量
          coupon_surplus_num: '', // 优惠劵剩余数量
          reason: '' // 推荐理由
        },
        coupon_start_time: '',
        coupon_end_time: '',
        rules: {
          goods_url: [{
            required: true,
            message: '请输入商品地址',
            trigger: 'blur'
          }],
          goods_start_time: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'blur'
          }],
          goods_img: [{
            required: true,
            message: '请添加商品图',
            trigger: 'blur'
          }],
          goods_short_name: [{
            required: true,
            message: '请填写商品短标题',
            trigger: 'blur'
          }],
          goods_copywriting: [{
            required: true,
            message: '请填写商品文案',
            trigger: 'blur'
          }],
          // turn_copywriting: [{
          //   required: true,
          //   message: '请填写转载文案',
          //   trigger: 'blur'
          // }],
          coupon_url: [{
            required: true,
            message: '请填写优惠卷地址',
            trigger: 'blur'
          }]
          // reason: [{
          //   required: true,
          //   message: '请填写推荐理由',
          //   trigger: 'blur'
          // }],
          // search_label: [{
          //   required: true,
          //   message: '请填写搜索标签',
          //   trigger: 'blur'
          // }]
        },
        saleList: [ // 选择品牌列表
          // {
          //   id: 1,
          //   brand_name: 'haier'
          // }
        ],
        classList: [ // 选择商品分类列表
          // {
          //   id: 1,
          //   class_name: '女装'
          // }
        ],
        classid: '',
        goods_id: '',
        pagesize: 100,
        brand_id: '',
        flag2: false,
        page: 1,
        imgscount: 0,
        scrollTop: 0,
        ischeck: false,
        // 营销图
          // 长图显示
        isshow: '1',
        // 价格标签显示
        priceshow: false,
        // 长标签显示
        longshow: false,
        // 圆标签显示
        roundshow: false,
        // 尺寸选择
        sizeradio: '1',
        stripradio: '0',
        priceradio: '0',
        pricebgList: [
          require('@/assets/imgs/widge/price1.png'),
          require('@/assets/imgs/widge/price2.png'),
          require('@/assets/imgs/widge/price3.png'),
          require('@/assets/imgs/widge/price4.png'),
          require('@/assets/imgs/widge/price5.png'),
          require('@/assets/imgs/widge/price6.png'),
          require('@/assets/imgs/widge/price7.png'),
          require('@/assets/imgs/widge/price8.png'),
          require('@/assets/imgs/widge/price9.png')
        ],
        stripbgList: [
          require('@/assets/imgs/widge/long1.png'),
          require('@/assets/imgs/widge/long2.png'),
          require('@/assets/imgs/widge/long3.png'),
          require('@/assets/imgs/widge/long4.png'),
          require('@/assets/imgs/widge/long5.png'),
          require('@/assets/imgs/widge/long6.png'),
          require('@/assets/imgs/widge/long7.png'),
          require('@/assets/imgs/widge/long8.png')
        ],
        roundbgList: [
          require('@/assets/imgs/widge/round1.png'),
          require('@/assets/imgs/widge/round2.png'),
          require('@/assets/imgs/widge/round3.png'),
          require('@/assets/imgs/widge/round4.png'),
          require('@/assets/imgs/widge/round5.png'),
          require('@/assets/imgs/widge/round6.png'),
          require('@/assets/imgs/widge/round7.png'),
          require('@/assets/imgs/widge/round8.png'),
          require('@/assets/imgs/widge/round9.png'),
          require('@/assets/imgs/widge/round10.png'),
          require('@/assets/imgs/widge/round11.png'),
          require('@/assets/imgs/widge/round12.png')
        ],
        baoboxheight: 1030,
        miaoboxheight: 800,
        // 全局上传地址
        uploadaction: 'https://jfk-api.letuilm.com/api/upload_img',
        // 右边主图拖动条件
        isdown: false,
        flag: false,
        // 右侧图地址暂存
        moveimg: '',
        // 右侧营销图列表
        yximgList: [
          // "http://img.letuilm.com/2020/06/1d9b042020061717382128336.jpeg",
        ],
        // 右侧主图列表
        mainimgList: [],
        saveurl: '',
        goodsurl: '',
        dourl: '',
        // 三大卡片高度
        cardheight: 680,
        // 爆品汇总固定图片
        baoicon: require('@/assets/imgs/widge/baotop.png'),
        hot: require('@/assets/imgs/widge/hot.png'),
        // 爆款渲染列表
        baoList: [
          {
            font: [
              {
                text1: '文字三',
                title1: '【迪奥】',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '香水四件套',
                title_color2: '#ffffff',
                title_size2: '14',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '8月22日',
                title_color4: '#ffffff',
                title_size4: '14'
              }
            ],
            imgurl: '',
            status: 1
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '【迪奥】',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '香水四件套',
                title_color2: '#ffffff',
                title_size2: '14',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '8月22日',
                title_color4: '#ffffff',
                title_size4: '14'
              }
            ],
            imgurl: '',
            status: 1
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '【迪奥】',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '香水四件套',
                title_color2: '#ffffff',
                title_size2: '14',

                text3: '文字五',
                title3: '6666',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '8月22日',
                title_color4: '#ffffff',
                title_size4: '14'
              }
            ],
            imgurl: '',
            status: 1
          }
        ],
        baoradio: 0, // 爆款列表单选
        // 爆款风格
        baostyle: 1,
        baostyleList: [
          {
            value: 1,
            label: '缤纷_单列1'
          },
          {
            value: 2,
            label: '缤纷_单列2'
          },
          {
            value: 3,
            label: '缤纷_单列3'
          }
        ],
        miaoradio: 0, // 秒杀列表单选
        // 好单预告列表
        miaoList: [
          {
            font: [
              {
                text1: '文字三',
                title1: '三只松鼠',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '50.0',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '10.0',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '3月14号 上午10:00',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            isblue: true
          },
          {
            font: [
              {
                text1: '文字三',
                title1: '三只松鼠',
                title_color1: '#ffffff',
                title_size1: '18',

                text2: '文字四',
                title2: '50.0',
                title_color2: '#ffffff',
                title_size2: '16',

                text3: '文字五',
                title3: '10.0',
                title_color3: '#ffffff',
                title_size3: '16',

                text4: '文字六',
                title4: '3月14号 上午10:00',
                title_color4: '#ffffff',
                title_size4: '16'
              }
            ],
            imgurl: '',
            isblue: false
          }
        ],
        // 好单预告轮播图
        miaoimglist: [
          { url: require('@/assets/imgs/widge/baobgblue.png') },
          { url: require('@/assets/imgs/widge/baobgorange.png') },
          { url: require('@/assets/imgs/widge/baobgred.png') }
        ],
        // 边框颜色
        bordercolor: '#FF0000',
        // 小标签
        smallLabel: 1,
        // iconfont颜色
        icfontcolor: '#FF0000',
        // 定位盒子top
        potop: '0px',
        poleft: '0px',
        // 文11
        title11: '稻香村月饼礼盒',
        title_color11: '#ffffff',
        title_size11: '33',
        title_famiy11: '微软雅黑',
        // 文字10
        title10: '企业送礼10饼6味共680g',
        title_color10: '#ffffff',
        title_size10: '16',
        title_famiy10: '微软雅黑',
        // 文字9
        title9: '50.0',
        title_color9: '#ffffff',
        title_size9: '30',
        title_famiy9: '微软雅黑',
        // 文字8
        title8: '京东价111元',
        title_color8: '#ffffff',
        title_size8: '12',
        title_famiy8: '微软雅黑',
        // 文字7
        title7: '3月14号 上午10:00',
        title_color7: '#ffffff',
        title_size7: '16',
        title_famiy7: '微软雅黑',
        // 文字6
        title6: '3月14号 上午10:00',
        title_color6: '#ffffff',
        title_size6: '16',
        title_famiy6: '微软雅黑',
        // 文字5
        title5: '10.0',
        title_color5: '#ffffff',
        title_size5: '16',
        title_famiy5: '微软雅黑',
        // 文字4
        title4: '三只松鼠',
        title_color4: '#ffffff',
        title_size4: '14',
        title_famiy4: '微软雅黑',
        // 文字3
        title3: '29.9',
        title_color3: '#FF0000',
        title_size3: '20',
        title_famiy3: '微软雅黑',
        title_border3: '1px solid red',
        // 文字2
        title2: '明日预告',
        title_color2: '#FF0000',
        title_size2: '14',
        title_famiy2: '微软雅黑',
        // 文字1
        title1: '精选必抢',
        title_color1: '#ffffff',
        title_size1: '32',
        title_famiy1: '微软雅黑',
        // 营销推广图背景
        graphBgImg: '',

        graphradio: 1, // 中间标签切换展示控制
        leftshow: '1', // 中间分类展示控制
        uploadradio: 1, // 左边上传布局控制
        // 上传图片地址
        imgone: '',
        imgtwo: '',
        imgthree: '',
        imgfour: '',
        imgfive: '',
        // 字体大小下拉框 12-32
        sizeList: [
          {
            value: '12',
            label: '12'
          },
          {
            value: '14',
            label: '14'
          },
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          },
          {
            value: '26',
            label: '26'
          },
          {
            value: '28',
            label: '28'
          },
          {
            value: '30',
            label: '30'
          },
          {
            value: '32',
            label: '32'
          }
        ],
        // 字体大小下拉框16-48
        sizeList2: [
          {
            value: '16',
            label: '16'
          },
          {
            value: '18',
            label: '18'
          },
          {
            value: '20',
            label: '20'
          },
          {
            value: '22',
            label: '22'
          },
          {
            value: '24',
            label: '24'
          },
          {
            value: '26',
            label: '26'
          },
          {
            value: '28',
            label: '28'
          },
          {
            value: '30',
            label: '30'
          },
          {
            value: '32',
            label: '32'
          },
          {
            value: '34',
            label: '34'
          },
          {
            value: '36',
            label: '36'
          },
          {
            value: '38',
            label: '38'
          },
          {
            value: '40',
            label: '40'
          },
          {
            value: '42',
            label: '42'
          },
          {
            value: '44',
            label: '44'
          },
          {
            value: '46',
            label: '46'
          },
          {
            value: '48',
            label: '48'
          }
        ],
        // 字体选择
        famiyList: [
          {
            value: '宋体',
            label: '宋体'
          },
          {
            value: 'Arial',
            label: 'Arial'
          },
          {
            value: '黑体',
            label: '黑体'
          },
          {
            value: '微软雅黑',
            label: '微软雅黑'
          },
          {
            value: '微软正黑体',
            label: '微软正黑体'
          },
          {
            value: '楷体',
            label: '楷体'
          },
          {
            value: '新宋体',
            label: '新宋体'
          },
          {
            value: '仿宋',
            label: '仿宋'
          },
          {
            value: 'Times New Roman',
            label: 'Times New Roman'
          },
          {
            value: 'Helvetica',
            label: 'Helvetica'
          },
          {
            value: 'Verdana',
            label: 'Verdana'
          },
          {
            value: 'Tahoma',
            label: 'Tahoma'
          }
        ],
        // 预设颜色
        predefineColors: [
          '#FFFFFF',
          '#FF4500',
          '#FF8C00',
          '#FFD700',
          '#90ee90',
          '#00ced1',
          '#1e90ff',
          '#c71585',
          '#FF7800'
        ],
        // 主题风格
        stylechooseList: [
          {
            value: 1,
            label: '紫橙缤纷'
          },
          {
            value: 2,
            label: '橙紫缤纷'
          },
          {
            value: 3,
            label: '蓝色_单列'
          },
          {
            value: 4,
            label: '橙色_单列'
          }
        ],
        stylechoose: 1,
        // 排版风格
        composingstyleList: [
          {
            value: 1,
            label: '单行标题'
          },
          {
            value: 2,
            label: '多行标题'
          }
        ],
        composingstyle: 1

      }
    },

    computed: {

    },
    created () {
      this.getClassList()
    },
    mounted () {

    },
    methods: {
      selectEmoji2 (code) {
        const codestr = this.emoji(code)
           var elInput = document.getElementById('emojiInput')
        // console.log(elInput);
        // 根据id选择器选中对象
        var startPos = elInput.selectionStart // input 第0个字符到选中的字符
        var endPos = elInput.selectionEnd // 选中的字符到最后的字符
        // console.log(startPos, " --- ", endPos);
        if (startPos === undefined || endPos === undefined) return
        var txt = elInput.value
        // 将表情添加到选中的光标位置
        var result =
          txt.substring(0, startPos) + codestr + txt.substring(endPos)
        elInput.value = result // 赋值给input的value
        // 重新定义光标位置
        elInput.focus()
        elInput.selectionStart = startPos + codestr.length
        elInput.selectionEnd = startPos + codestr.length
        this.form.friend_copywriting = result // 赋值
      },
      openemoji () {
        this.showDialog = !this.showDialog
      },
      handleClose (removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag)
        // console.log(tags)
        this.tags = tags
      },

      showInput () {
        this.inputVisible = true
        this.$nextTick(function () {
          this.$refs.input.focus()
        })
      },

      handleInputChange (e) {
        this.inputValue = e.target.value
      },

      handleInputConfirm () {
        const inputValue = this.inputValue
        let tags = this.tags
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue]
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: ''
        })
      },

      Scroll (e) {
        // console.log(this.$refs.evabox.scrollTop)
        const ele = e.srcElement ? e.srcElement : e.target
        if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) { // 监听滚动到div底部
          this.loadingbtn = true
          if (this.ischeck === false) {
            this.ischeck = true
            getEvaluateImgs({
              page: this.page,
              goods_id: this.goods_id
            }).then(res => {
              if (res.code === 200) {
                this.page++
                // console.log('评价图', res)
                this.imgsList.push(...res.data.data)
                this.ischeck = false
                this.loadingbtn = false
              } else {
                this.$message.info(res.msg)
              }
            }).catch(err => {
              console.log(err)
            })
          }
        }
      },
      closechoose (item) {
        // console.log(item)
        for (const i in this.chooseimged) {
          if (this.chooseimged[i] === item) {
            this.chooseimged.splice(i, 1)
          }
        }
      },
      handleOka (e) {
        // console.log(this.chooseimged)
        this.fileList = []
        for (const i in this.chooseimged) {
          var obj = {
            uid: i,
            name: 'image.png',
            status: 'done',
            url: this.chooseimged[i]
          }
          this.fileList.push(obj)
        }
        this.evaimgs = false
      },
      showeva () {
        this.evaimgs = true
        getEvaluateImgs({
          page: this.page,
          goods_id: this.goods_id
        }).then(res => {
          // console.log('评价图', res)
          this.imgscount = res.data.count
          this.imgsList = res.data.data
          this.scrollTop = this.$refs.evabox.scrollTop
        }).catch(err => {
          console.log(err)
        })
      },
      classchange (val) {
        this.classid = val
        this.getGoodsBrand(val, 1, this.pagesize)
      },
      pageChange (page, pageSize) {
        // console.log(page, pageSize)
        this.getGoodsBrand(this.classid, page, this.pagesize)
      },
      disabledEndDate (endValue) {
        if (!endValue) {
          return false
        }
        return endValue < Moment().subtract('days', 1) || endValue > Moment().add('days', 3)
      },
      handleEndOpenChange (open) {
        this.endOpen = open
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
      // 根据分类查询商品品牌
      getGoodsBrand (id, page, size) {
        getGoodsBrand({
            class_id: id,
            page: page,
            pagesize: size
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('品牌返回', res)
              if (res.code === 200) {
                this.salecount = res.data.count
                this.saleList = res.data.data
                // this.form.brand_id=
              }
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      closeimg2 (val) {
        if (val === 1) {
          this.form.goods_img = ''
        } else {
          this.form.marketing_img = ''
        }
      },
      handleCancel () {
        this.previewVisible = false
        this.evaimgs = false
        this.chooseimged = []
      },
      handlePreview (file) {
        // console.log(file)
        if (file.response) {
          this.previewImage = file.response.data.url
        } else {
          this.previewImage = file.url
        }
        this.previewVisible = true
      },
      handleChange2 ({
        fileList
      }) {
        // console.log(fileList)
        this.fileList = fileList
      },
      // 获取分类
      getClassList () {
        getClassList({
            page: 1,
            pagesize: 999999
          })
          .then(res => {
            if (res.code === 200) {
              // console.log('获取分类返回', res)
              this.classList = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      // 正则获取URL参数
      getUrl (urlstr, name) {
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
          var r = urlstr.substr(1).match(reg)// search,查询？后面的参数，并匹配正则
          if (r != null) return unescape(r[2]); return null
      },
      // 检测优惠劵
      doDetectionCoupon () {
        // this.form.coupon_url =
        //   'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeoFJo6sqF9mKl7rAu0VVCZX7x-9zQS2dEYwXfIv8BWw2DO5SlWCB4kTkGglPnJv1W_U4DDQ&time=1597218938384'
        // this.form.coupon_url =
        //   'https://coupon.m.jd.com/coupons/show.action?key=d3519994173f45d4a4223a6b819e2a57&roleId=36118862&ac=666'
        if (this.form.coupon_url === '') {
          return this.$message.info('请填写优惠卷地址进行检测!')
        } else {
          const coupon1 = this.form.coupon_url.indexOf('linkKey=')
          const end = this.form.coupon_url.indexOf('&')
          const end2 = this.form.coupon_url.indexOf('&roleId=')
          if (coupon1 !== -1) {
            if (end !== -1) {
              this.form.coupon_url = this.form.coupon_url.substring(0, end)
            }
          //  console.log('coupon_url', this.form.coupon_url, end)
          } else {
            const roleId = this.getUrl(this.form.coupon_url, 'roleId')
            this.form.coupon_url = this.form.coupon_url.substring(0, end2)
            this.form.coupon_url = this.form.coupon_url + '&roleId=' + roleId
            // console.log('coupon_url', this.form.coupon_url)
          }
          doDetectionCoupon({
              coupon_url: this.form.coupon_url
            })
            .then(res => {
              if (res.code === 200) {
                // console.log('检测优惠劵返回', res)
                this.form.goods_after_price = this.form.goods_price - res.data.discount
                this.form.coupon_all_num = res.data.batchCount
                this.form.coupon_discount = res.data.discount
                this.form.coupon_start_time = parseInt(res.data.start_time.toString().slice(0, -3))
                this.form.coupon_end_time = parseInt(res.data.end_time.toString().slice(0, -3))
                this.coupon_start_time = Moment(parseInt(res.data.start_time)).format(
                  'YYYY-MM-DD HH:mm:ss')
                this.coupon_end_time = Moment(parseInt(res.data.end_time)).format('YYYY-MM-DD HH:mm:ss')

                this.form.coupon_surplus_num = res.data.num
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
      // 检测商品检测
      doDetectionGoods () {
        // this.form.goods_url = 'https://item.jd.hk/64582754829.html'
        if (this.form.goods_url === '') {
            return this.$message.info('请填写商品地址进行检测!')
        } else {
          this.btnloading = true
          doDetectionGoods({
              goods_url: this.form.goods_url
            })
            .then(res => {
              if (res.code === 200) {
                this.btnloading = false
                this.goodsurldis = true
                this.ischack = true
                this.flag2 = false
                // console.log('检测商品返回', res)
                this.goods_id = res.data.goods_id
                this.classid = res.data.class_id
                this.getGoodsBrand(res.data.class_id, 1, this.pagesize)
                this.form.shop_id = res.data.shop_id
                this.form.shop_name = res.data.shop_name
                this.form.goods_name = res.data.goods_name
                this.form.goods_price = res.data.price
                this.form.goods_type = res.data.type.toString()
                this.form.goods_class_id = res.data.class_id
                this.brand_id = res.data.brand_id
                this.form.brand_id = res.data.brand_name
                this.form.goods_img = res.data.goods_img
                  this.fileList = []
                for (const i in res.data.goods_xj_img) {
                  if (i < 5) {
                    var obj = {
                      uid: i,
                      name: 'image.png',
                      status: 'done',
                      url: res.data.goods_xj_img[i].url
                    }
                    this.fileList.push(obj)
                  }
                }
              } else {
                this.flag2 = true
                this.btnloading = false
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      },
      handleChange3 (info) {
        // console.log('info', info)
        this.form.goods_img = `//` + info.file.response.data.url
      },
      handleChange4 (info) {
        // console.log('info', info)
        this.form.marketing_img = `//` + info.file.response.data.url
      },
      handleChange (info) {
        // console.log('info', info)
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        this.videourl = `http://` + info.file.response.data.url
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      onSubmit () {
        // console.log('细节图', this.fileList)
        if (this.fileList.length > 0) {
          var urlStre = ''
          for (var i = 0; i < this.fileList.length; i++) {
            if (this.fileList[i].response) {
              if (this.fileList[i].response !== '') {
                urlStre += `http://` + this.fileList[i].response.data.url + ','
              }
            } else {
              urlStre += this.fileList[i].url + ','
            }
          }
          urlStre = urlStre.substring(0, urlStre.length - 1)
          this.form.goods_xj_img = urlStre
          // console.log('相关', this.form.goods_xj_img)
        }
        if (this.startshow === 1) {
          var num = Date.now()
          this.form.goods_start_time = num.toString().slice(0, -3)
        } else {
          this.form.goods_start_time = parseInt(Moment(this.form.start_time).valueOf() / 1000)
          // console.log('this.form.goods_start_time2222', this.form.goods_start_time)
        }
        // this.form.goods_start_time = '1'
        if (typeof this.form.brand_id !== 'number') {
          this.form.brand_id = this.brand_id
        }
        this.form.search_label = this.tags.toString()
        this.form.commission_bl = parseInt(this.form.commission_bl)
        // console.log('this.form.search_label', this.form.search_label)
        // console.log('提交表单', this.form)
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            if (this.flag2 === false) {
              if (this.form.goods_after_price < 0) {
                this.$message.info('对不起!卷后价不能为负!请重新检测优惠卷!')
              } else {
                doAddGoods(this.form).then(res => {
                  if (res.code === 200) {
                    // console.log(res)
                  this.goodsurldis = false
                  this.showDialog = false
                  this.ischack = false
                  this.form = {
                    goods_img: '',
                    marketing_img: ''
                  }
                  this.$message.success('新增成功!')
                  this.tags = []
                  this.fileList = []
                  this.coupon_start_time = ''
                  this.coupon_end_time = ''
                } else {
                  this.$message.info(res.msg)
                }
              }).catch(err => {
                console.log(err)
              })
              }
            } else {
              this.$message.info('对不起!该商品已经在推广,请勿重复提交!')
            }
          } else {
            this.$message.info('请检查表单!')
            return false
          }
        })
      },
      // 营销图
      // 尺寸切换
      sizechange (val) {
        console.log('sizeradio', val, this.sizeradio)
      },
      // 价格标签切换
      pricechange (val) {
        console.log('priceradio', val)
        if (val === 0) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#D70D35'
          this.title_color10 = '#ffffff'
          this.title_color11 = '#ffffff'
        }
        if (val === 1 || val === 6) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#ffffff'
          this.title_color10 = '#ffffff'
          this.title_color11 = '#ffffff'
        }
        if (val === 2) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#ffffff'
          this.title_color10 = 'black'
          this.title_color11 = '#ffffff'
        }
        if (val === 3) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#D70D35'
          this.title_color10 = '#D70D35'
          this.title_color11 = '#ffffff'
        }
        if (val === 4) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#1E635E'
          this.title_color10 = '#1E635E'
          this.title_color11 = '#ffffff'
        }
        if (val === 5) {
          this.title_color8 = '#ffffff'
          this.title_color9 = '#D70D35'
          this.title_color10 = '#ffffff'
          this.title_color11 = '#ffffff'
        }
        if (val === 7) {
          this.title_color8 = '#0371cd'
          this.title_color9 = '#ffffff'
          this.title_color10 = '#0371cd'
          this.title_color11 = '#ffffff'
        }
        if (val === 8) {
          this.title_color8 = '#ffffffb3'
          this.title_color9 = '#ffffff'
          this.title_color10 = '#ffffff'
          this.title_color11 = '#ffffff'
        }
      },
      // 长标签切换
      stripchange (val) {
        console.log('strpradio', val)
      },
      // 圆标签切换
      smallchange (val) {
        // console.log('smallLabel', val, this.smallLabel)
        if (val === 8) {
          this.title_color1 = '#fc4b4b'
          this.title_color2 = '#fc4b4b'
          this.title_color3 = '#fc4b4b'
        } else if (val === 9) {
          this.title_color1 = '#563cf6'
          this.title_color2 = '#563cf6'
          this.title_color3 = '#563cf6'
        } else if (val === 11) {
          this.title_color1 = '#813f25'
          this.title_color2 = '#813f25'
          this.title_color3 = '#813f25'
        } else {
          this.title_color1 = '#ffffff'
          this.title_color2 = '#ffffff'
          this.title_color3 = '#ffffff'
        }
      },
      // 预复制
      handleOk2 (val) {
        // this.$nextTick(function() {
        const selection = window.getSelection()
        const range = document.createRange()
        // console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)) // 传入dom
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
        // });
      },
      // 复制
      handleOk (val) {
        // console.log(val)
        if (this.dourl === '') {
          this.$message.info('请先合成图片再复制!')
        } else {
          this.$nextTick(function () {
            const selection = window.getSelection()
            const range = document.createRange()
            // console.log(document.getElementById(val))
            range.selectNode(document.getElementById(val)) // 传入dom
            selection.addRange(range)
            document.execCommand('copy')
            this.$message.success('复制成功')
            selection.removeAllRanges()
          })
        }
      },
      // 爆品汇总删除最后一个
      colsebaolist () {
        this.baoList.pop()
        this.baoradio = 0
        // console.log("this.baoList", this.baoList);
        const canvasbox3 = document.querySelector('.canvas_box3')
        if (this.cardheight > 660) {
          this.cardheight = canvasbox3.offsetHeight - 190
          // console.log(this.cardheight)
        }
        if (this.cardheight < 630) {
          this.cardheight = 650
          // console.log(this.cardheight)
        }
        this.baoboxheight = this.cardheight
      },
      // 秒杀预告删除
      colsemiaolist () {
        this.miaoList.pop()
        this.miaoradio = 0
        // console.log("close_miaoList", this.miaoList);
        var canvasbox2 = document.querySelector('.canvas_box2')
        if (this.cardheight > 615) {
          this.cardheight = canvasbox2.offsetHeight - 190
          // console.log(this.cardheight)
        }
        if (this.cardheight <= 615) {
          this.cardheight = 615
          // console.log(this.cardheight)
        }
        this.miaoboxheight = this.cardheight
      },
      // 关闭图片的显示
      closeimg (val, index) {
        window.event.preventDefault()
        if (val === 1) {
          this.imgone = ''
        }
        if (val === 2) {
          this.imgtwo = ''
        }
        if (val === 3) {
          this.imgthree = ''
        }
        if (val === 4) {
          this.imgfour = ''
        }
        if (val === 5) {
          this.imgfive = ''
        }
        if (val === 6) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i === index) {
              this.miaoList[i].imgurl = ''
            }
          }
        }
        if (val === 7) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i === index) {
              this.baoList[i].imgurl = ''
            }
          }
        }
      },
      // 营销推广图标签的显示
      showtabsdiv () {
        this.$refs.showtabs.style.display = 'block'
      },
      // 营销推广图标签的隐藏
      closediv (val) {
        document.getElementById(val).style.display = 'none'
        // this.$refs.showtabs.style.display = 'none'
      },
      // 爆品汇总左侧列表切换
      baoradiochange (val) {
        console.log('baoradio', val)
      },
      // 秒杀左侧列表切换
      miaoradiochange (val) {
        console.log('miaoradio', val)
      },
      // 爆款汇总增加
      addbaolist () {
        var status1 = {
          font: [
            {
              text1: '文字三',
              title1: '【迪奥】',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '香水四件套',
              title_color2: '#ffffff',
              title_size2: '14',

              text3: '文字五',
              title3: '6666',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '8月22日',
              title_color4: '#ffffff',
              title_size4: '14'
            }
          ],
          imgurl: '',
          status: 1
        }
        this.baoList.push(status1)
        var canvasbox3 = document.querySelector('.canvas_box3')
        // console.log("1+", this.cardheight);
        if (this.cardheight < 1224) {
          if (canvasbox3.offsetHeight < 619) {
            this.cardheight = 700
          } else {
            this.cardheight = canvasbox3.offsetHeight + 172
          }
          // console.log('2+', this.cardheight)
        }
        this.baoboxheight = this.cardheight
      },
      // 秒杀预告增加
      doaddlist () {
        var obj1 = {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: true
        }
        var obj2 = {
          font: [
            {
              text1: '文字三',
              title1: '三只松鼠',
              title_color1: '#ffffff',
              title_size1: '18',

              text2: '文字四',
              title2: '50.0',
              title_color2: '#ffffff',
              title_size2: '16',

              text3: '文字五',
              title3: '10.0',
              title_color3: '#ffffff',
              title_size3: '16',

              text4: '文字六',
              title4: '3月14号 上午10:00',
              title_color4: '#ffffff',
              title_size4: '16'
            }
          ],
          imgurl: '',
          isblue: false
        }
        if (this.stylechoose === 1) {
          if (this.miaoList.length % 2 === 0) {
            this.miaoList.push(obj1)
          } else {
            this.miaoList.push(obj2)
          }
        }
        if (this.stylechoose === 2) {
          this.miaoList.push(obj1)
        }
        if (this.stylechoose === 3) {
          this.miaoList.push(obj2)
        }
        // console.log("this.miaoList", this.miaoList);
        var canvasbox2 = document.querySelector('.canvas_box2')
        if (this.cardheight < 1224) {
          if (canvasbox2.offsetHeight < 615) {
            this.cardheight = 625
          } else {
            this.cardheight = canvasbox2.offsetHeight + 210
            // console.log(this.cardheight)
          }
        }
        this.miaoboxheight = this.cardheight
      },
      // 爆款主题风格切换
      baostylechange (val) {
        // console.log('baostyle', val)
        if (val === 1) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 4 === 0) {
              this.baoList[i].status = 1
            } else if (i % 4 === 1) {
              this.baoList[i].status = 2
            } else if (i % 4 === 2) {
              this.baoList[i].status = 3
            } else if (i % 4 === 3) {
              this.baoList[i].status = 4
            }
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 2 === 0) {
              this.baoList[i].status = 1
            } else {
              this.baoList[i].status = 3
            }
          }
        }
        if (val === 3) {
          for (let i = 0; i < this.baoList.length; i++) {
            if (i % 2 === 0) {
              this.baoList[i].status = 2
            } else {
              this.baoList[i].status = 4
            }
          }
        }
      },
      // 秒杀主题风格切换
      stylechoosechange (val) {
        // console.log('stylechoose', val)
        if (val === 1) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i % 2 === 0) {
              this.miaoList[i].isblue = true
            } else {
              this.miaoList[i].isblue = false
            }
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.miaoList.length; i++) {
            if (i % 2 === 0) {
              this.miaoList[i].isblue = false
            } else {
              this.miaoList[i].isblue = true
            }
          }
        }
        if (val === 3) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].isblue = true
          }
        }
        if (val === 4) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].isblue = false
          }
        }
      },
      // 排版风格切换
      composingstylechange (val) {
        // console.log('composingstyle', val)
        if (val === 1) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].font[0].title_size2 = '16'
          }
        }
        if (val === 2) {
          for (let i = 0; i < this.miaoList.length; i++) {
            this.miaoList[i].font[0].title_size2 = '14'
          }
        }
      },
      // 风格切换事件
      stylechange (val) {
        console.log('风格切换-styleradio', val)
      },
      // 移动盒子事件按下 圆标签
      movedown (e, val) {
        // console.log('按下', e, val)
        var father = this.$refs.mycanvas
        // var son = this.$refs.showtabs
        var son = document.getElementById(val)
        son.style.zIndex = son.style.zIndex + 2
        // console.log(document.getElementById(val))
        var changetop = father.offsetHeight - son.offsetHeight
        var changeleft = father.offsetWidth - son.offsetWidth
        // const showtabs = this.$refs.showtabs //获取目标元素
        const showtabs = document.getElementById(val) // 获取目标元素
        // console.log("pageY", this.father.pageY);
        // console.log("pageX", this.father.pageX);
        // 算出鼠标相对元素的位置
        const disX = e.clientX - showtabs.offsetLeft
        const disY = e.clientY - showtabs.offsetTop
        document.onmousemove = e => {
          // 鼠标按下并移动的事件
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          const left = e.clientX - disX
          const top = e.clientY - disY
          // console.log('top', top)
          // console.log("left", left);
          if (top >= 0 && top <= changetop) {
            showtabs.style.top = top + 'px'
          }
          if (left >= 0 && left <= changeleft) {
            showtabs.style.left = left + 'px'
          }
          // 绑定元素位置到positionX和positionY上面
          // this.positionX = top;
          // this.positionY = left;

          // 移动当前元素
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      // 标签切换控制
      graphchange (val) {
        // console.log('标签切换-graphradio', val)
        this.$refs.showtabs.style.display = 'block'
        this.styleradio = 1
        this.imgfive = ''
        // const showTabs = this.$refs.showtabs // 获取目标元素
      },
      // 左边布局切换
      uplradchange (val) {
        // console.log('上传布局-uploadradio', val)
        this.imgone = ''
        this.imgtwo = ''
        this.imgthree = ''
        this.imgfour = ''
        this.imgfive = ''
        this.$refs.showtabs.style.display = 'none'
        this.$refs.showlong.style.display = 'none'
        this.$refs.showprice.style.display = 'none'
      },
      // 中间顶部分类控制
      setchange (val) {
        // console.log('中间顶部分类-leftshow', val)
        this.dourl = ''
        this.saveurl = ''
        const showtabs = this.$refs.showtabs // 圆标签
        const showlongs = this.$refs.showlong // 长标签
        const showprice = this.$refs.showprice // 价格标签
        if (val === '2') {
          showtabs.style.display = 'block'
          this.roundshow = true
          this.cardheight = this.miaoboxheight
          this.title1 = '折扣价'
          this.title_color1 = '#ffffff'
          this.title_size1 = '16'
          this.title_famiy1 = '微软雅黑'

          this.title2 = '速度抢'
          this.title_color2 = '#ffffff'
          this.title_size2 = '12'
          this.title_famiy2 = '微软雅黑'

          this.title3 = '比促销价更优惠'
          this.title_color3 = '#ffffff'
          this.title_size3 = '12'
          this.title_famiy3 = '微软雅黑'

          this.title4 = '100'
          this.title_color4 = '#ffffff'
          this.title_size4 = '14'
          this.title_famiy4 = '微软雅黑'
        }
        if (val === '3') {
          showlongs.style.display = 'block'
          showlongs.style.top =
            this.uploadradio === 1 || this.uploadradio === 4
              ? '329px'
              : this.uploadradio === 2
              ? '514px'
              : this.uploadradio === 3
              ? '205px'
              : this.uploadradio === 5
              ? '403px'
              : '267px'
          this.longshow = true
          this.cardheight = 600
          this.title5 = '￥19.9'
          this.title_color5 = '#ffffff'
          this.title_size5 = '18'
          this.title_famiy5 = '微软雅黑'

          this.title6 = '京东好货'
          this.title_color6 = '#ffffff'
          this.title_size6 = '18'
          this.title_famiy6 = '微软雅黑'

          this.title7 = '立减20元'
          this.title_color7 = '#ffffff'
          this.title_size7 = '18'
          this.title_famiy7 = '微软雅黑'
        }
        if (val === '4') {
          showprice.style.display = 'block'
          showprice.style.top = '0'
          showprice.style.left = '0'
          this.priceshow = true
          this.cardheight = 700

          this.title8 = '京东价111元'
          this.title_color8 = '#ffffff'
          this.title_size8 = '12'
          this.title_famiy8 = '微软雅黑'

          this.title9 = '50.0'
          this.title_color9 = '#D70D35'
          this.title_size9 = '30'
          this.title_famiy9 = '微软雅黑'

          this.title10 = '企业送礼10饼6味共680g'
          this.title_color10 = '#ffffff'
          this.title_size10 = '16'
          this.title_famiy10 = '微软雅黑'

          this.title11 = '稻香村月饼礼盒'
          this.title_color11 = '#ffffff'
          this.title_size11 = '33'
          this.title_famiy11 = '微软雅黑'
        }
        if (val === '5') {
          this.title_size1 = '32'
          this.title_size2 = '14'
          this.title_color2 = '#ffffff'
        }
      },
      // 上传成功7---爆品汇总上传
      uploadSuccess7 (res, file, fileList, val) {
        // console.log('上传7', res, file, fileList, val)
        for (let i = 0; i < this.baoList.length; i++) {
          if (i === val) {
            this.baoList[i].imgurl = `http://` + res.data.url
            break
          }
        }
        // this.imgone = "http://" + fileList[0].response.data.url;
        // console.log(this.imgone);
      },
      // 上传成功6---秒杀预告上传
      uploadSuccess6 (res, file, fileList, val) {
        // console.log('上传6', res, file, fileList, val)
        // console.log("返回fileList", fileList);
        for (let i = 0; i < this.miaoList.length; i++) {
          if (i === val) {
            this.miaoList[i].imgurl = `http://` + res.data.url
            break
          }
        }
        // this.imgone = "http://" + fileList[0].response.data.url;
        // console.log(this.imgone);
      },
      // 上传成功1
      uploadSuccess1 (res, file, fileList) {
        // console.log("上传1", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgone = 'http://' + fileList[0].response.data.url
        // console.log(this.imgone);
      },
      // 上传成功2
      uploadSuccess2 (res, file, fileList) {
        // console.log("上传2", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgtwo = 'http://' + fileList[0].response.data.url
        // console.log(this.imgtwo);
      },
      // 上传成功3
      uploadSuccess3 (res, file, fileList) {
        // console.log("上传3", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgthree = 'http://' + fileList[0].response.data.url
        // console.log(this.imgthree);
      },
      // 上传成功4
      uploadSuccess4 (res, file, fileList) {
        // console.log("上传4", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgfour = 'http://' + fileList[0].response.data.url
        // console.log(this.imgfour);
      },
      // 上传成功5=>自定义上传
      uploadSuccess5 (res, file, fileList) {
        // console.log("上传4", res, file.raw);
        // console.log("返回fileList", fileList);
        this.imgfive = 'http://' + fileList[0].response.data.url
        // console.log(this.imgfour);
      },
      // 上传失败
      uploadError (err, file, fileList) {
        console.log('上传失败信息', err, file, fileList)
        this.$message.error(fileList)
      },
      // 限制上传参数
      beforeAvatarUpload (file) {
        // console.log(file.type)
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG,PNG格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 5MB!')
        }
        return isJPG && isLt2M
      },
      // 营销推广导出为图片
      saveYXImg (val) {
        window.pageYoffset = 0
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 先获取你要转换为img的dom节点
        var node = document.getElementById(val)
        // console.log("node", node);
        var width = node.offsetWidth // dom宽
        var height = node.offsetHeight // dom高
        var scale = 2 // 放大倍数
        //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
        html2canvas(node, {
          width: width,
          heigth: height,
          backgroundColor: '#ffffff', // 背景是否透明 为null 透明
          dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
          scale: scale,
          X: 0,
          Y: 0,
          scrollX: -3, // 如果左边多个白边 设置该偏移
          scrollY: 0,
          useCORS: true, // 是否使用CORS从服务器加载图像 !!!
          allowTaint: true // 是否允许跨域图像污染画布  !!!
        }).then(canvas => {
          // console.log("canvas", canvas);
          var url = canvas.toDataURL() // 这里上面不设值cors会报错
          var a = document.createElement('a')
          a.download = '营销图' // 设置图片名称
          var event = new MouseEvent('click')
          a.href = url
          a.dispatchEvent(event) // 触发a的单击事件
        })
      },
      // 秒杀/爆品 合成为图片
      saveAsImg (val) {
        const loading = this.$loading({
          lock: true,
          text: '合成中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        window.pageYoffset = 0
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        // 先获取你要转换为img的dom节点
        var node = document.getElementById(val)
        // console.log("node", node);
        var width = node.offsetWidth // dom宽
        var height = node.offsetHeight // dom高
        var scale = 2 // 放大倍数
        //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
        html2canvas(node, {
          width: width,
          heigth: height,
          backgroundColor: '#ffffff', // 背景是否透明 为null 透明
          dpi: window.devicePixelRatio * 2, // 按屏幕像素比增加像素
          scale: scale,
          X: 0,
          Y: 0,
          scrollX: -3, // 如果左边多个白边 设置该偏移
          scrollY: 0,
          useCORS: true, // 是否使用CORS从服务器加载图像 !!!
          allowTaint: true // 是否允许跨域图像污染画布  !!!
        }).then(canvas => {
          // console.log("canvas", canvas);
          var url = canvas.toDataURL() // 这里上面不设值cors会报错

          // var a = document.createElement("a");
          // a.download = "营销图"; //设置图片名称
          // var event = new MouseEvent("click");
          // a.href = url;
          // console.log("a", a);
          // a.dispatchEvent(event); //触发a的单击事件

          this.saveurl = url
          // console.log("url", url);
          uploadBase({
            file: url
          })
            .then(res => {
              if (res.code === 200) {
                loading.close()
                // console.log('base上传返回', res.data.url)
                this.dourl = 'http://' + res.data.url
                this.$message.success('合成成功!')
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        })
      }
    }
  }
</script>

<style lang='less' scoped>
  .display {
    display: flex;
  }

  .evaimgs_box {
    height: 750px;
    overflow-y: auto;

    .choose_box {
      width: 100%;
      height: 105px;
      line-height: 100px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0px;
      z-index: 9;
      box-shadow: 0px 5px 5px #8080803d;
      border-bottom: 1px solid #8080803d;
      background-color: #fff;

      .chooseimg {
        position: relative;
        border: 1px solid #8080803d;
        background-color: #8080803d;
        border-radius: 8px;
        margin: 0 15px;

        img {
          width: 100px;
          padding: 5px;
        }
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18px;
        cursor: pointer;
        display: none;
      }
    }

    .chooseimg:hover {
      .anticon-close-circle {
        display: block;
      }
    }

    /deep/.ant-checkbox {
      display: none !important;
    }

    /deep/.ant-col {
      height: 110px;
    }

    .ant-checkbox-wrapper {
      margin: 10px 5px;
      // box-sizing: border-box;

    }

    /deep/.ant-checkbox-wrapper-checked {
      border: 1px solid #8080803d;
      border-radius: 8px;
      background-color: #8080803d;
    }
  }

  .addgoods {
    // display: flex;
    position: relative;
    .form_box {
      width: 1000px;
      position: relative;

      .emoji_box {
        position: relative;

        #exampleInputEmoji {
          position: absolute;
          bottom: -26px;
          right: 0;

          /deep/.ant-btn:hover {
            background-color: #fff;
          }
          .vue_emoji{
            position: absolute;
            top: -143px;
            left: 66px;
            border: 1px solid #e8e8e8;
            /deep/.emoji-controller{
              padding: 0;
            }
            /deep/.emoji-container{
              // height: 135px!important;
              padding: 0;
            }

          }
        }
      }

      .form_title {
        height: 20px;
        line-height: 20px;
        font-size: 18px;
        color: #545454;
        font-weight: bold;
        padding-left: 20px;
        position: relative;
      }

      .form_title:before {
        display: block;
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 3px;
        height: 20px;
        margin-top: -10px;
        background: #2073f2;
        border-radius: 5px;
        background-image: linear-gradient(#2073f2, #4a8ef6);
      }

      .getinfo {
        padding: 0px 38px;
        border-radius: 7px;
      }

      .ant-input {
        color: #000;
        height: 40px;
        margin-right: 10px;
      }

      .showimg_mian {
        display: flex;

        .anticon-play-circle {
          font-size: 67px;
        }

        .showimg {
          width: 238px;
          height: 264px;
          margin-right: 20px;

          /deep/.ant-upload {
            width: 238px;
            height: 264px;
            padding: 0px;
          }

          .nogoodsimg {
            // border: 1px solid #ccc;
            text-align: center;

            .no_main {
              width: 150px;
              margin: 66px auto;

              .anticon-fund {
                font-size: 67px;
              }
            }
          }

          img {
            width: 100%;
            height: 100%;
          }
        }

        .img_box {
          position: relative;
          color: white;

          img {
            width: 100%;
            height: 100%;
          }

          .anticon-close-circle {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24px;
            cursor: pointer;
            display: none;
            transition: all 0.3s linear;
          }

          img:hover+.anticon-close-circle {
            display: block;
          }

          .anticon-close-circle:hover {
            display: block;
            transform: rotate(90deg);
          }
        }

        .upload_box {
          /deep/.ant-upload {
            width: 238px;
            height: 264px;
          }

          .upvideo {
            width: 482px;
            height: 264px;
          }
        }
      }
      .show_w{
        position: absolute;
        top: calc(50% - 50px);
        right: -26px;
        width: 25px;
        background-color: blue;
        color: white;
        text-align: center;
        padding: 5px 0;
        cursor: pointer;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
      .coupon_box {
        .coupon_info {
          display: flex;
          text-align: center;
          border: 1px solid #d9d9d9;
          margin-bottom: 10px;

          span {
            display: inline-block;
            width: 250px;
            padding: 0px 15px;
            background-color: #fafafa;
          }

          .ant-input {
            border: none;
          }
        }
      }

      .subbtn {
        display: block;
        width: 266px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        border-radius: 30px;
        font-size: 24px;
        background: #6775fc;
        color: #fff;
        cursor: pointer;
        border: none;
        box-shadow: 0 5px 10px rgba(7, 133, 253, 0.5);
        text-decoration: none;
        margin-left: 400px;
        transition: all 300ms ease;
      }

      .subbtn:hover {
        background: #2d3feb;
        color: #fff;
      }

      .tips {
        position: absolute;
        right: -430px;
        bottom: -104px;
        width: 360px;
        padding: 20px;
        background: #f8fbff;
        color: #878787;
        border-radius: 5px;
        // z-index: 99;
        line-height: 2;
        box-shadow: 0 5px 10px rgba(7, 133, 253, 0.15);
      }
    }
  }
  .position_w{
    position: absolute;
    top: 0;
    left: 1062px;
  }
  .widgepic {
    width: 100%;
    // background-color: #f6f6f6;
    p{
      margin-bottom: 0 !important;
    }
  .widgepic_main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .main_box {
      width: 100%;
      overflow-y: auto;
      padding-bottom: 10px;
      text-align: center;
      //   height: 675px;
      .show_top1 {
        width: 100%;
        margin-top: 10px;
        .uploadradio::v-deep {
          .el-radio-group {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
          }
          .el-radio__inner {
            display: none;
          }
          .el-radio {
            margin-right: 20px;
          }
          .el-radio__label {
            display: inline-block;
          }
          .templatebox {
            width: 125px;
            height: 125px;
            padding: 10px;
            background: #f0f0f0;
            margin-bottom: 10px;
            span {
              display: inline-block;
            }
          }
          .templatebox:hover {
            background: #c7c7c7;
          }
          .img1 {
            background: #adf;
          }
          .img2 {
            background: #cfc;
          }
          .img3 {
            background: #fcc;
          }
          .img4 {
            background: #cff;
          }
          .img5 {
            background: #ccf;
          }
          .temp1 {
            .img1 {
              width: 105px;
              height: 105px;
            }
          }
          .temp2 {
            text-align: center;
            .img1 {
              display: block;
              width: 70px;
              height: 70px;
              margin: 0 auto;
            }
            .img2 {
              width: 35px;
              height: 35px;
            }
            .img3 {
              width: 35px;
              height: 35px;
            }
          }
          .temp3 {
            display: flex;
            justify-content: center;
            align-items: center;
            .img1 {
              width: 70px;
              height: 70px;
            }
            .flexin {
              display: inline-block;
            }
            .img2 {
              display: block;
              width: 35px;
              height: 35px;
            }
            .img3 {
              display: block;
              width: 35px;
              height: 35px;
            }
          }
          .temp4 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            span {
              width: 52px;
              height: 52px;
            }
          }
          .temp5 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            div:nth-child(1) {
              display: inline-block;
              width: 45px;
              height: 90px;
            }
            div:nth-child(2) {
              width: 30px;
              height: 90px;
              display: inline-block;
            }
            .img1 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img2 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img3 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img4 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img5 {
              width: 30px;
              height: 30px;
              float: left;
            }
          }
          .temp6 {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            div {
              width: 90px;
              text-align: center;
              margin: 0 auto;
            }
            .img1 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img2 {
              width: 45px;
              height: 45px;
              float: left;
            }
            .img3 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img4 {
              width: 30px;
              height: 30px;
              float: left;
            }
            .img5 {
              width: 30px;
              height: 30px;
              float: left;
            }
          }
          .is-checked {
            .templatebox {
              background: #c7c7c7;
            }
          }
        }
      }
      .canvas_box {
        width: 370px;
        // height: 485px;
        margin: 0 auto;
        margin-top: 10px;
        .mycanvas {
          position: relative;

          .uploadone::v-deep {
            position: relative;
            width: 370px;
            height: 370px;
            background-color: #f6f6f6;
            box-sizing: border-box;
            // border: 1px solid red;

            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadone:hover {
            background-color: #cccccc;
          }
          .uploadtwo::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadtwo:hover {
            background-color: #cccccc;
          }
          .uploadthree::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            // background-color: #f6f6f6;
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadthree:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadfour::v-deep {
            width: 185px;
            height: 185px;
            box-sizing: border-box;
            // border: 1px solid red;
            .el-upload-dragger {
              box-sizing: border-box;
              width: 100%;
              height: 100%;
            }
            .el-upload {
              width: 100%;
              height: 100%;
            }
          }
          .uploadfour:hover {
            background-color: #cccccc;
          }
          .uploadradio1 {
            .img_box::v-deep {
              height: 100%;
              position: relative;
              .el-icon-close {
                display: none;
                cursor: pointer;
                z-index: 200;
                position: absolute;
                top: 2px;
                right: 2px;
                width: 30px;
                height: 30px;
                line-height: 30px;
                background: #fff;
                font-weight: 600;
                font-size: 20px;
                font-style: normal;
                color: #5680fe;
                text-align: center;
                border-radius: 15px;
                transition: all linear 0.5s;
              }
              .el-icon-close:hover {
                background: #607bfe;
                color: #fff;
                transform: rotate(90deg);
                -webkit-transform: rotate(90deg);
              }
            }
            .img_box:hover {
              .el-icon-close {
                display: block;
              }
            }
          }
          .up3 {
            display: flex;
            width: 370px;
            height: 246px;
            .uploadone {
              display: inline-block;
              width: 246px;
              height: 246px;
            }
            .uploadtwo {
              width: 123px;
              height: 123px;
            }
          }
          .up5 {
            display: flex;
            align-items: flex-start;
            height: 444px;
            .up5_left {
              width: 222px;
              display: inline-block;
            }
            .up5_right {
              width: 148px;
              display: inline-block;
            }
            .uploadone {
              width: 222px;
              height: 222px;
              float: left;
            }
            .uploadtwo {
              width: 148px;
              height: 148px;
            }
          }
          .up6 {
            width: 370px;
            height: 308px;
            .up6_top {
              display: flex;
            }
            .up6_bot {
              display: flex;
            }
            .uploadthree {
              width: 185px;
              height: 185px;
            }
            .uploadtwo {
              width: 123px;
              height: 123px;
            }
          }
        }
      }
    }
    // 中间设置
    .main_top {
      margin: 20px auto;
      /deep/.el-radio-button__inner{
        padding: 12px 14px;
      }
    }
    .main_content {
      margin-top: 10px;
      text-align: center;
      .graph_box::v-deep {
        padding: 10px;
        margin: 0 auto;
        .el-radio-group {
          margin-left: -5px;
        }
        .el-radio {
          margin-right: 8px;
          padding: 8px 0;
        }
      }
      .setgraph_box {
        .top_img {
          width: 370px;
          // height: 126px;
          margin: 0 auto;
          border-radius: 10px;
          background-color: #eeeeee;
          padding-bottom: 22px;
        }
        .top_img:hover {
          background: linear-gradient(180deg, #fee7e5, #f0ccff);
        }
      }
    }
  }
  .img_box {
    position: relative;
  }
  .img_box:hover {
    .el-icon-close {
      display: block;
    }
  }
  // 公共样式
  .el-icon-close {
    display: none;
    cursor: pointer;
    z-index: 200;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    font-weight: 600;
    font-size: 20px;
    font-style: normal;
    color: #5680fe;
    text-align: center;
    border-radius: 15px;
    transition: all linear 0.5s;
  }
  .el-icon-close:hover {
    background: #607bfe;
    color: #fff;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
  }
  .show_img {
    position: relative;
    width: 320px;
    height: 65px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 240px;
      height: 33px;
      line-height: 33px;
      // background-color: #fff;
    }
    .show_info {
      position: absolute;
      right: 2px;
      bottom: 0;
      width: 64px;
      height: 70px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      p {
        padding-top: 17px;
        width: 64px;
      }
      div {
        font-weight: 700;
        width: 45px;
        height: 27px;
        text-align: center;
        padding-bottom: 11px;
      }
    }
  }
  .show_img2 {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
    z-index: 200;
    background-position-y: bottom;
    background-size: 100%;
    .show_title {
      text-align: center;
      width: 100%;
      height: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .sh1 {
      align-items: flex-end;
    }
  }
  .show_img2.active {
    width: 120px;
    height: 120px;
  }
  .graph3_box::v-deep {
    // width: 411px;
    height: 388px;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      width: 175px !important;
      // margin: 0px 0px 20px !important;
      height: 175px !important;
      border-radius: 10px;
      background-color: #eeeeee;
      padding-bottom: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .graph4_box::v-deep {
    width: 435px;
    height: 197px;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      width: 400px !important;
      // margin: 0px 0px 20px !important;
      height: 51px !important;
      border-radius: 10px;
      background-color: #eeeeee;
      padding-bottom: 0px !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconfont_box {
      position: relative;
      width: 400px;
      height: 41px;
      text-align: center;
      .position_text {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        p {
          margin-bottom: 0;
          width: 122px;
          height: 41px;
          line-height: 41px;
        }
      }
    }
  }
  .graph5_box::v-deep {
    width: 415px;
    height: 340px;
    margin: 0 auto;
    overflow: hidden;
    overflow-y: auto;
    .el-radio-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-radio {
        margin-right: 0;
        .el-radio__input {
          display: none !important;
        }
      }
    }
    .graph3 {
      box-sizing: initial;
      width: 360px !important;
      padding: 15px 20px 10px 20px;
      margin-right: 15px;
      border-radius: 10px;
      background-color: #eeeeee;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .iconfont_box {
      position: relative;
      width: 360px;
      height: 100px;
      text-align: center;
      .position_text {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        p{
          margin-bottom: 0;
        }
      }
    }
  }
  .iconfont_box {
    position: relative;
    width: 175px;
    height: 158px;
    text-align: center;
    .position_text {
      position: absolute;
      p{
        margin-bottom: 0;
      }
    }
  }
  .graph3:hover {
    background: linear-gradient(180deg, #fee7e5, #f0ccff);
  }
  .bg_box {
    position: relative;
    width: 130px;
    height: 130px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #fe293c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 17px;
    box-sizing: border-box;
    letter-spacing: 1em;
    .bg_title {
      // position: absolute;
      font-weight: 500;
      box-sizing: border-box;
      z-index: 999;
    }
    .bg_h {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 1px;
      border-top: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
    .bg_s {
      position: absolute;
      top: 0;
      left: 50%;
      width: 1px;
      height: 100%;
      border-left: 1px dashed #ffabb3;
      opacity: 0.5;
      font-weight: 400;
      font-style: normal;
      box-sizing: border-box;
    }
  }
  .title4 {
    width: 86px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 0;
    right: 0;
  }
  .uploadfive::v-deep {
    width: 140px;
    height: 140px;
    background-color: #fff;
    border-radius: 50%;
    flex-direction: column;
    color: #5490ff;
    overflow: hidden;
    user-select: none;
    background-size: 100% 100%;
    box-sizing: border-box;
    border: 1px solid red;
    margin: 0 auto;
    .el-upload-dragger {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .el-upload {
      width: 100%;
      height: 100%;
      // margin-top: 15px;
    }
    .img_box {
      height: 100%;
      position: relative;
      .el-icon-close {
        display: none;
        cursor: pointer;
        z-index: 200;
        position: absolute;
        top: 2px;
        right: 56px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        background: #fff;
        font-weight: 600;
        font-size: 20px;
        font-style: normal;
        color: #5680fe;
        text-align: center;
        border-radius: 15px;
        transition: all linear 0.5s;
      }
      .el-icon-close:hover {
        background: #607bfe;
        color: #fff;
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
      }
    }
    .img_box:hover {
      .el-icon-close {
        display: block;
      }
    }
  }
  // 定位活动标签
  .show_tabs {
    position: absolute;
    // width: 100%;
    .el-icon-close {
      display: none;
      cursor: pointer;
      z-index: 16;
      position: absolute;
      top: -10px;
      right: 2px;
      // float: right;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: #fff;
      font-weight: 600;
      font-size: 14px;
      font-style: normal;
      color: #5680fe;
      text-align: center;
      border-radius: 15px;
      transition: all linear 0.5s;
    }
    .el-icon-close:hover {
      background: #607bfe;
      color: #fff;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
  }
  .show_tabs:hover {
    cursor: move;
    user-select: none;
    .el-icon-close {
      display: inline-block;
    }
  }
  .set_box {
  width: 450px;
  margin: 0 auto;
  }
  .display {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  // position: relative;
  }
  .display2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .canvas_box2 {
    width: 370px;
    margin: 0 auto;
    margin-top: 10px;
    #miaocanvas {
      .position_box {
        width: 100%;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        top: 46px;
        left: 0;
        .show_title {
          white-space: nowrap;
        }
      }
      .miaolist::v-deep {
        .el-radio__input {
          display: none;
        }
        .el-radio {
          width: 100%;
          margin-right: 0;
        }
        .el-radio__label {
          padding-left: 0px;
        }
        .miao_main {
          width: 370px;
          border-radius: 10px;
          margin-top: 10px;
          .miao_img {
            position: relative;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .miao_uploadone {
              // width: 170px;
              // padding-top: 10px;
              .el-upload {
                width: 139px;
                height: 139px;
              }
            }
            .rigtitle {
              height: 100%;
              margin-left: 10px;
              .toptie {
                width: 200px;
                overflow: hidden;
                height: 100%;
                .show_title {
                  width: 100%;
                  white-space: nowrap;
                  text-align: left;
                }
              }
            }
            .bg_num {
              width: 80px;
              height: 139px;
              text-align: center;
              position: absolute;
              margin-left: 280px;
              color: rgba(255, 255, 255, 0.8);
              z-index: 1;
              line-height: 139px;
              font-size: 150px;
            }
          }
        }
        .miao_main:hover {
          .el-icon-close {
            display: block;
          }
        }
      }
    }
  }
  .canvas_box3 {
    width: 370px;
    margin: 0 auto;
    margin-top: 10px;
    .top_bg {
      text-align: center;
      border-radius: 10px;
      height: 170px;
      position: relative;
      background: url('~@/assets/imgs/widge/baobg.png') no-repeat center;
      background-size: 100%;
      .position_box {
        position: absolute;
        width: 100%;
        top: 28px;
        left: 0;
      }
    }
    .miaolist::v-deep {
      .el-radio__input {
        display: none;
      }
      .el-radio {
        width: 100%;
        margin-right: 0;
      }
      .el-radio__label {
        padding-left: 0px;
      }
      .miao_main {
        width: 370px;
        border-radius: 10px;
        margin-top: 10px;
        .miao_img {
          position: relative;
          box-sizing: border-box;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          .miao_uploadone {
            // width: 170px;
            // padding-top: 10px;
            .el-upload {
              width: 139px;
              height: 139px;
            }
          }
          .rigtitle {
            height: 100%;
            margin-left: 10px;
            .toptie {
              width: 180px;
              overflow: hidden;
              margin-left: 10px;
              height: 100%;
              text-align: left;
              .show_title {
                // width: 100%;
                white-space: nowrap;
              }
              .issue_box {
                width: 176px;
                height: 26px;
                z-index: 5;
                position: absolute;
                bottom: 8px;
                font-size: 12px;
                line-height: 26px;
                border-radius: 13px;
                background: #ffbc00;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }
          }
        }
      }
      .miao_main:hover {
        .el-icon-close {
          display: block;
        }
      }
    }
  }
}
</style>
